<!-- 组件通讯二 $broadcast()方法 --> <section> <h3>父组件添加的数据源：</h3> <div> <label for="">id:</label> <div> <input type="text" v-model="id"> </div> </div> <div> <label for="">姓名:</label> <div> <input type="text" v-model="name"> </div> </div> <div> <label for="">爱好:</label> <div> <input type="text" v-model="inst"> </div> </div> <div> <label for=""> </label> <div> <a href="https://www.jb51.net/javascrip:;" @click="add_table">添加</a> </div> </div> <h3>下面的表格是子组件信息：</h3> <!-- 把父组件的table_data数据绑定到子组件上 --> <broadcase :data="table_data"></broadcase> </section> <template> <div> <table> <thead> <tr> <th>id</th> <th>姓名</th> <th>爱好</th> </tr> </thead> <tbody> <tr v-for="list in data"> <td>{{ list.id }}</td> <td>{{ list.name }}</td> <td>{{ list.inst }}</td> </tr> </tbody> </table> </div> </template> <script> Vue.component('broadcase',{ //这里直接使用了注册组件的语法糖的方式注册，简单快捷 template: '#broadcase', props: ['data'], // props是用来接受父组件的传递参数，也可在里面自定义数据，如果数据需要有默认值的话，需在data里面定义 data: function() { return { msg : 'abc' } }, events : { //这里只是个例子，子组件监听父组件的数据变化 test : function(msg){ console.log(msg); } }, methods: { } }); var mvvm = new Vue({ el: '#app', data: { table_data: [ { id: 1, name: 'gjei', inst: 'gjweir' },{ id: 2, name: 'jiuyer', inst: 'oiuyt' } ] }, methods: { add_table: function(){ var set = { id: this.id, name: this.name, inst : this.inst }; this.table_data.push(set); // this.$broadcast('test', set); //这里，只是一个例子语法 this.id = ''; this.name = ''; this.inst = ''; } } }); </script>
上处举的两个例子，都可以点击这里测试，文件已经上传个人空间 vue父子组件通讯demo
当写到这里的时候，回头看了一下，自己写的内容，貌似写得有点乱，真是汗颜啊！很久之前就想过写博客，建立自己的笔记库，只是以前尝试写的时候，真是无法下手如何去写，最近，下定决心，不管写的怎么样，也坚持去写，万一哪天自己的文笔突然变得好起来了呢！
vue父子组件通讯，其实应用并不是很难，它其实也是提供了相应的api接口监听，实际的项目应用该如何操作变化，还是得需要我们自己写，重点，还是得要提高我们的js水平，毕竟，复杂的web应用越来越多！希望，喜欢前端的同学们都能在js的路上共勉.
您可能感兴趣的文章: