父级组件获取子级组件数据,也就是子组件把自己的数据使用vm.$emit()方法发送到父级上,在父级内的子组件身上使用v-on接收即可,子级发送数据的格式为:vm.$emit(事件名字,数据);
父级组件
emplate>
<div id="app">
<h1>这里是父组件-->{{childName}}</h1>
//注意在父级内的接收事件加载子级模版上,且此事件接收一个参数
<hello @trans="get"></hello>
</div>
</template>
<script>
import hello from './components/Hello'
export default {
name: 'app',
data () {
return {
childName: ''
}
},
methods: {
get (msg) {
this.childName = msg
}
},
components: {
hello
}
}
</script>
子级组件
<template>
<div id="hello">
<h2>我是子组件</h2>
<input type="text" v-model="name">
<input type="button" value="按钮" @click="send">
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
name: ''
}
},
methods: {
send () {
this.$emit('trans', this.name)
this.name = ''
}
}
}
</script>