Vue.js父子组件通信开发示例

Vue.js是一个构建数据驱动web界面的库。Vue.js的目标是通过尽可能简单的API实现响应和组合视图组件的数据绑定。(这是官方解释！)

边肖从未使用过angularjs，也从未使用过react.js，这三者之间的区别无法详细解释。如果你想知道，官方有分析，请点击这里查看。

边肖从事前端开发已经一年多了。一开始，前端开发展示的技术太多，边肖无法兼顾。在了解之后，他选择了向原来的js基础学习，与jquery合并。边肖使用vue.js也是因为业务需要。为什么不选择angularjs？事实上，你不能同时抛弃jquery。vue.js和jquery可以完美兼容。因为这个项目，边肖奋斗了很久，不断的加班和学习，避免了项目开发时间的增加。不用说，让我们开始学习一些边肖vue的总结。如果你写得不好，不要惊讶和写作。

母链边肖是vue的一个例子，作为母链

子组件可以通过这个成为它的父组件。根实例的父可以使用这个访问它。根父有一个数组。子组件，它的所有元素；当然，在一个项目中，我们不能只有一两个组件。当有许多组件时，我们无法记住组件在儿童中的位置。我们可以使用v-ref指令为我们的组件创建一个钩子。这个钩子是我们的其他组件访问组件时的索引。

//这是我的组件之一msg v-ref:msgs/msg //此时，我们为这个msg组件设置了一个msg的索引//我们可以通过这种方式访问组件var VM=new Vue({ })；Var子项=vm。$refs.msgs //以这种方式访问我们的子组件//v-ref是一个数组或对象，它是我们设置所有ref钩子的组件的集合。这里给大家看一张图片，看看和家长、孩子相关的内容，$refs(好像图片有点模糊，不能调整动态图片，尴尬，看不清楚，可以。)

虽然我们可以通过这种方式直接访问整个实例中的组件，但是不建议这样做，因为直接修改父组件的状态对于子组件是非常不利的，这样会使父组件和子组件紧密耦合。理想情况下，每个组件只能修改自己的状态，因为每个组件的范围是独立的；

在这种情况下，vue还为我们带来了他们的定制活动

使用$dispatch()来调度沿着父链冒泡的事件；

使用$broadcast()来广播事件，这些事件会向下传输到所有后代。

好像有点抽象。如果你举个例子，你会明白很多。

//$dispatch()冒泡案例！-instance-div id=' app '！-组件通信I-section div class=' MAS-arry '标签为=' msg data :/label { { msg } }/div！-子组件-msg/msg/section/div模板id=' msg' div class=' InP '输入类型=' text ' v-model=' msg ' a href=' JavaScript 3360；'@ click=' add _ data ' add/a/div/templatescriptvue.component(' msg '，{//这里直接用注册组件的语法糖来注册，是一个简单快捷的模板： '#msg '。data : function(){ return { msg : ' ABC ' } }，methods : { add _ data : function(){//单击此事件时，将触发$dispatch()方法；Add_msg是父组件创建的监控子组件的方法，意思是，告诉父组件这个方法，爸爸，我更新了数据，par_msg是我更新的数据，所以请尽快更新！将par_msg数据传递给父组件进行更新！var par _ msg=this . msg . trim()；//这个。$ parent . add(par _ msg)；//这个方法就是这个的方法。直接操作父组件的$ dispatch ('add _ msg '，par _ msg)。//此方法使用事件传播的方式this.msg=}}});varmvvm=new vue({ El : ' # app }，data : { msg :[' SG ']}，event s : {//创建一个事件' add _ msg' 3360函数(msg)来监听相应的响应子组件{//add _ msg是一个监听子组件的方法。当收到子组件的通知时，更新子组件的更新数据，其中msg为子组件的par _ msgthis . msg . push(msg)；}}，methods : { add : function(msg){ this . msg . push(msg)；}}});/script看完这段代码，相信大家都知道$dispatch()冒泡的用法。其实就是这么一回事，有两个参数。第一个参数是父组件的监控子组件事件对象中的方法名，两者应该一致；第二个参数是子组件更新的数据，也是传递给父组件同步更新的数据，然后父组件使用这个参数进行相应的操作

//使用$ broadcast()方法与使用$dispatch()方法相同。区别在于事件对象是在子组件中创建的，而触发的函数是在父组件中。这里我想说的是，如果一个子组件的数据完全依赖于一个父组件的数据，那么就不需要使用一般的事件传输方法，只需要通过道具获取父组件的数据，并绑定到子组件上即可。

！-组件通信ii $broadcast()方法-section class=' sec ' H3 data source由父组件添加：/h3div class=' box clear fix ' Label for=' box-left ' id 3360/Label div class=' bor-right '输入类型=' text ' v-model=' id '/div/div class=' box clear fix ' Label for=' class=' box-left ' name 3360/Label div class=' bor-right '输入类型=' text' v-model=' name'/div/div@点击='add_table '添加/a/div/divh3下表为子组件信息：/h3！-将父组件的table_data数据绑定到子组件-broadcase : data=' table _ data '/broadcase/section template id=' broadcase ' div class=' table ' table head trthid/Th name/Th hobby/Th/tr/the dtbodytr v-for=' list in data ' TD { { list . id } }/tdtd { { list . name } }/tdtd { { list . inst } }/TD/tr/t body/table/div/templatescriptvue组件。简单快捷的template3360' # broadcase '，prop s 3360[' data ']，//props用于接受父组件的传递参数，也可以自定义其中的数据。如果数据需要有默认值，需要定义data : function(){ return { msg : ' ABC ' }，event s 3360 {//这只是一个例子，子组件监控父组件test 3360 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 3360 }this . table _ data . push(set)；//这个。$broadcast('test '，set)；//这里，只是一个例子。语法this.id=this.name=this.inst=}}});/script中给出的两个示例可以通过单击此处进行测试。该文件已上传到个人空间vue亲子组件通信演示

写到这里回头一看，写的内容好像有点乱。真可惜！很久以前我就想过写博客，建立自己的笔记库，但是以前试着写的时候，真的无从下手。最近我下定决心不管怎么写都要坚持写，以防有一天写作突然好起来！

实际上，vue-parent组件通信的应用并不是很难，但它也提供了相应的api接口监控。实际的项目申请如何操作和变更，还是需要我们自己去写。关键是提高我们的js水平。毕竟现在的web应用越来越复杂了！希望喜欢前端的同学可以在js中分享。