一、父子组件间的通信一个简单的例子如图，下面有个目录结构：父组件下面有个子组件。我们要实现的就是：子组件接受父组件的data数据点击子组件中按钮，可以将子组件中数据反馈给父组件直接上代码：这里没有引入vue,自行引入<div id=“app”></div> <script> //子组件 var child = { template: <div class="child"> 子组件---> {{fromfather}} <br > <button @click='sendParent'>反馈信息给父组件</button> </div> , props: [‘fromfather’], data(){ return{ childmsg:‘我是子组件的数据’ } }, methods: { sendParent() { this.$emit(‘fromchild’, this.childmsg) } } } // 父组件 var parent = { template: <section> 父组件 ----> {{fromchildmsg}} <child v-bind:fromfather="msg" @fromchild='getdata'></child> </section> , //声明子组件 components: { child }, //父组件的数据，准备让子组件接受 data() { return { msg: ‘我是父组件的数据’, fromchildmsg:’’ } }, methods: { getdata(val) { this.fromchildmsg = val } } } new Vue({ el: ‘#app’, components: { parent }, template: <div> <parent class="parent"></parent> </div> }) </script>点击后效果如图：箭头后面的即是从其他组件中传过来的数据二、总结父传子父用子的时候通过属性传递子要声明props:[‘属性名’] 来接收收到就是自己的了，随便你用在template中 直接用在js中 this.属性名 用子传父子组件里通过$emit(‘自定义事件名’,变量1，变量2)触发父组件@自定义事件名=‘事件名’监听如：子组件方法里 this.$emit(‘sendfather’,val1,val2)触发自定义事件父组件里 <child @sendfather=‘mymethods’></child>