VueJs组件的亲子沟通方式

组件(父子通信)

一.概括

在一个组件中定义另一个组件称为父子组件。

但是，需要注意的是：1。子组件只能在父组件内部使用(写在父组件tempalte中)；

2.默认情况下，子组件不能访问父组件上的数据，每个组件实例的范围是独立的；

然后如何完成父子之间的沟通，简单一句话：道具向下，事件向上：父组件通过道具向下传递数据给子组件，子组件通过事件发送给父组件

父到子：道具子到父：子：$emit(eventName)父$on(eventName)父访问者：ref

解释了以下三种情况：

二、父亲传给儿子：道具

组件实例的范围是独立的。这意味着父组件的数据不能(也不应该)在子组件的模板中被直接引用。要使子组件使用父组件的数据，需要使用子组件的props选项

使用Prop传输数据包括静态和动态两种形式。首先介绍静态道具

1.静态道具

script src=' http:https://unpkg.com/vue'/script div id=' example ' parent/parent/div script//如果子组件可以获得父组件的，那么子组件必须声明： props var子节点={ template : ' div { { message } }/div '。prop :['消息']} //这里的消息应该和上面道具中的值一致。var父节点={ template 3360 ` div class=' parent ' Child message=' I am '/Child子消息='徐小小'/child/div `，组件： {'child' :子节点} }；//创建根实例newvue ({el:' # example '，components : { ' parent ' : parent node } })/脚本效果：

命名约定：

对于道具声明的属性，在父HTML模板中，属性名需要用破折号来写

在声明子道具属性时，可以使用小驼峰或中破折号；当子模板使用从父模板传来的变量时，需要使用相应的小驼峰书写

上面这句话是什么意思？

Script //这里需要注意的是，道具可以写成['my-message']或者['myMessage']。//但是模板中的属性名只能是驼峰类型{{myMessage}}。无效的var子节点={ template: ' div { {我的消息}}/div '如果它也被写成{ {我的消息}}。Props: ['myMessage']} //这里的属性名是my-message var父节点={ template 3360 ` div class=' parent ' Child my-message=' I is '/Child Child my-message='徐小小'/child/div `，组件： { ' child ' : childnode } }/script如果我们的子节点中的myMessage更改为{{my-message}}，请查看运行结果：

2.动态道具

在模板中，将父组件的数据动态绑定到子模板的道具类似于绑定到任何普通的HTML功能，即使用v-bind。每当父组件的数据发生变化时，该变化也会传递给子组件

var child node={ template : ' div { { myMessage } }/div '，prop s :[' my-message ']} var parent node={ template : ` div class=' parent ' child : my-message=' data 1 '/child : my-message=' data 2 '/child/div `，components : { ' child ' : child node }，data(){ return { ' data 1 ' 3: ' 11103.传递数字

初学者常犯的一个错误是使用字面语法传递数值

script src=' http:https://unpkg.com/vue'/script div id=' example ' parent/parent/div script var子节点={ template 3360 ' div { { my message } }的类型为{{type}}/div '，prop 3360[' my message ']，computed : { type(){ return type of this . my message } } } var parentNode={ template : ` div class=' parent ' my-child my-message=' 1 '/my-child/div `，components: { '//创建根实例newvue ({el:' # example '，components : { ' parent ' : parent node } })/脚本结果：

因为它是一个文字道具，所以它的值是字符串“1”而不是数字。如果你想传递一个实际的数字，你需要使用v-bind，这样它的值就被计算为JS表达式

如何把String转换成number，其实只需要换一个地方。

varparentnode={ template : ` div class=' parent '/只要父组件my-message='1 '更改为：my-message='1 '，结果就会变成数字类型my-child 3360 my-message=' 1 '/my-child/div `，}；当然，如果想通过v-bind传递字符串类型，应该怎么做呢？

我们可以使用动态道具在数据属性中设置相应的数字1

var parent node={ template : ` div class=' parent ' my-child : my-message=' data '/my-child/div `，components : { ' my child ' : child node }，//这里，' data': 1代表数字类型，' data': '1 '代表String类型的数据(){ return { ' data ' : { 1 } }；第三，孩子转向父亲：发射

关于$emit的用法

1.父组件可以使用道具将数据传输给子组件。2.子组件可以使用$emit来触发父组件的用户定义事件。

儿童主键

模板div class=' train-city ' span @ click=' select('大连`)大连/span/div/模板脚本导出默认{name :' train city '，方法： { select(val){ let data={ city name 3360 val }；这个。$emit('showCityName '，数据)；//触发//select事件后，会自动触发showCityName事件}}} /script的父组件

template train city @ showCityName=' updatecity ' : index=' good city '/train city//收听子组件的show city name事件。模板脚本导出默认{name:' index '，data(){ return { to city : ' Beijing ' } } methods : { update city(data){//触发子组件city selection-city selection this . to city=data . city name的事件；//更改了父组件console.log的值(' toCity:' this。to city)} }/脚本结果为：tocity :大连

第二种情况

script src=' http :3359 unpkg.com/vue '/script div id=' counter-event-example ' p { { total } }/p button-counter v-: increment 1=' incrementTotal '/button-counter button-counter button-counter button-counter v-: increment 2=' incrementTotal '/button-counter/div script vue.component(' button-counter '，{ template 3360 ' button v-3: click=' increment ' { increment这样做的目的是使每个button-counter不共享一个counterdata : function(){ return { counter :0 } }，methods : { increment 3360 function(){//这里，1只给button的值加1，如果父组件需要加1，则需要$ emit event this . counter=1；这个。$emit('increment1 '，[12，' kkk '])；} } });new Vue({ El : ' # counter-event-example '，data: { total: 0 }，methods : { incrementtotal : }函数(e){ this . total=1；console . log(e)；} } });/script详细解释：

1: button-counter是父主键，父主键中有一个按钮。

2:两个按钮都绑定到click事件，在方法：this中。$ emit ('increment 1 '，[12，' kkk '])；则它将调用父类v-on侦听的increment1事件。

3:当听到increment1事件时，执行incrementTotal，然后将该值传递给父组件，并调用父类的方法。

4:这里要注意第二个按钮计数器对应的v-:’增量2，里面的按钮对应这个。$ emit ('increment 1 '，[12，' kkk '])；因此，第二个按钮不能将值传递给其父主键。

举例：一个按钮点击一次，自身及以上增加1，而第二个按钮只自身增加，不影响上面一个。

此外，每次单击第一个按钮时，都会在背景中打印出来，如下所示：

四.ref的用法(参考文献)

ref有三种用途

1.ref被添加到普通元素中，dom元素是用这个. ref.name获得的

2.ref被添加到子组件中，组件实例由这个. ref.name获取，所以组件的所有方法都可以使用。

3.如何使用v-for和ref获取一组数组或dom节点

1.ref被添加到普通元素中，dom元素是用这个. ref.name获得的

脚本src=' http :https://unpkg。com/vue '/script div id=' ref-external-component ' v-: click=' console ref ' component-父级ref=' outecompentref '/component-父级字首在外面的组件上/p/div脚本var ref outdecomponentem={ template : ' div class=' childComp ' H5我是子组件/H5/div ' }；var ref outsideconnet=new Vue({ El : ' # ref-external-component '，components 3360 { ' component-父亲： refoutsidecomponentTem }，方法： { console ref : function(){ console。日志(这个.);//# ref-外部组件某视频剪辑软件实例console.log(这参考文献。outsidoneref)；//div.childComp vue实例} } });/script效果：当在差异访问内点击一次：

2 .参考使用在外面的元素上

脚本src=' http :https://unpkg。com/vue '/脚本！-裁判在外面的元素上-div id=' ref-external-DOM ' v-: click=' console ref '组件-父/组件-父p ref=' outsideDomRef 'ref在外面的元素上/p/div脚本var ref outsidedomitem={ template : ' div class=' childComp ' H5我是子组件/H5/div ' }；var ref out Edom=new Vue({ El : ' # ref-external-DOM '，components 3360 { ' component-父亲： refoutsidedomTem }，方法： { console ref : function(){ console。日志(这个)；//# ref-external-DOM vue实例console.log(这参考文献。outsidedomref)；//p ref在外面的元素上/p } } })；/script

效果：当在差异访问内点击一次：

3 .参考使用在里面的元素上-局部注册组件

脚本src=' http :https://unpkg。com/vue '/脚本！-裁判在里面的元素上- div id='ref-inside-dom '组件-父/组件-父首选项在里面的元素上/p/div脚本var refinessidedomtem={ template : ' div class=' childComp ' v-: click=' console ref ' ' ' H5 ref=' insidedomtorf '我是子组件/h5' '/div '，方法： { console ref : function(){ console。日志(这个)；//div.childComp vue实例console.log(这参考文献。InSideDomref)；//h5我是子组件/H5 } } }；var refin sidedom=new Vue({ El : ' # ref-inside-DOM '，components : { ' component-父亲： refin sidedom tem } })；/script效果：当在点击范围内点击一次：

4 .参考使用在里面的元素上-全局注册组件

脚本src=' http :https://unpkg。com/vue '/脚本！-裁判在里面的元素上-全局注册-div id=' ref-inside-DOM-all ' ref-inside-DOM-quan JV/ref-inside-DOM-quan JV/div脚本//v-:输入指当投入里值发生改变触发showinsideDomRef事件vue。组件(' ref-inside-DOM-quan JV '，{ template : ' div class=' InSidestrapher ' '输入类型=' text ' ref=' InSideDomrefall ' v-: input=' ShowInSideDomref ' ' ' pref在里面的元素上-全局注册/p ' '/div '，方法： { showinsidedomref : function(){ console。日志(这个)；//这里的这其实还是div。在父控制台中。日志(这参考文献。InSideDomrefall)；//输入类型=' text ' } } })；var refinesdodomall=new Vue({ El : ' # ref-inside-DOM-all ' })；/script效果：当我第一次输入一时，值已改变出发事件，当我第二次在输入时在触发一次事件，所以后台应该打印两次

总结

以上所述是小编给大家介绍的组件组件之父子通讯的方式，希望对大家有所帮助，如果大家有任何疑问欢迎各我留言，小编会及时回复大家的！