<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<father></father>
</div>
<script>
let son = {
template: '<div>我刚刚交往了一个女朋友，她名字叫{{girlfriendName}}<button @click="tellFather">点击告诉我女朋友叫{{girlfriendName}}</button></div>',
data () {
return {
girlfriendName: 'rose'
}
},
methods: {
tellFather() {
// 1. 在这里通过this.$emit()方法向父亲发射事件及数据
// $emit()函数这里有两个参数，一个是自定义事件名称，另一个是数据
this.$emit('emitName', this.girlfriendName)
}
}
}
Vue.component('father', {
// 2. 在使用子组件的地方，通过v-on指令去监听子组件发射过来的事件
template: '<div>我儿子告诉我，她交往的女朋友叫{{songfname}}<son @emitName="getName"></son></div>',
components: {
son
},
data () {
return {
songfname: '?????'
}
},
methods: {
// 3. 通过函数的默认参数，接收子组件发射过来的数据
getName(name) {
console.log('父亲监听到儿子发射的事件了');
console.log(name);
// 4. 直接给父组件中的变量赋值
this.songfname = name
}
}
})
var vm = new Vue({
el: '#app',
data: {
}
})
</script>
</body>
</html>
Vue组件通讯父子传值之---子传父
猜你喜欢
转载自blog.csdn.net/Q_MUMU/article/details/85161259
今日推荐
周排行