使用Vue也有很长一段时间,但是一直以来都没对其组件之间的通信做一个总结,这次就借此总结一下。
<强> 1)道具和美元发出
父组件通过道具将数据下发给道具、子组件通过美元发出来触发自定义事件来通知父组件进行相应的操作
具体代码如下:
,,
' ' '//父组件
& lt; template>
& lt; div>
& lt; h4>道具和emit<美元/h4>
& lt;孩子们v: changeMsg=癱hangeMsg”:味精=拔毒?比;
& lt;/div>
& lt;/template>
& lt; script>
进口的孩子’。/儿童”;
出口默认{
数据(){
返回{
味精:“传递的值的
}
},
组件:{
孩子们
},
方法:{
changeMsg (val) {
这一点。味精=val;
}
}
}
& lt;/script>//子组件
& lt; template>
& lt; div>
& lt; h4 @click="通知"在{{味精}}& lt;/h4>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
数据(){
返回{
}
},
道具:“味精”,
方法:{
notify () {
这一点。美元发出(“changeMsg”、“修改后的”);
}
}
}
& lt;/script>
' ' '
<强> 2)vm。父母和vm。孩子美元
vm。父:美元父实例,如果当前实例有的话
vm。孩子:美元获取当前实例的直接直接子组件,需要注意的是孩子并美元不保证顺序,也不是响应式的
具体代码如下:
,,
' ' '//父组件的代码
& lt; template>
& lt; div>
& lt; h4>{{标题}}& lt;/h4>
& lt;按钮@click="修改"祝辞在父组件中修改子组件的标题& lt;/button>
& lt;孩子们/比;
& lt;/div>
& lt;/template>
& lt; script>
进口的孩子’。/children.vue”;
出口默认{
数据(){
返回{
标题:“父组件的
}
},
组件:{
孩子们
},
方法:{
修改(){
美元。孩子们[0]。title=靶薷暮蟮淖幼榧晏狻?
}
}
}
& lt;/script>//子组件的代码
& lt; template>
& lt; div>
& lt; h4>{{标题}}& lt;/h4>
& lt;按钮@click="修改"祝辞在子组件中修改父组件的标题& lt;/button>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
数据(){
返回{
标题:“子组件的
}
},
方法:{
修改(){
美元的父母。title=靶薷暮蟮母缸榧晏狻?
}
}
}
& lt;/script>
' ' '
<强> 3)自定义事件的v模型
https://cn.vuejs.org/v2/guide/components-custom-events.html % E8 % 87% aa % E5%AE % 9 e7%bb % % E4%B9 % 89% 84% e4%bb % 9 B6%E7 % % 84 - v模型
具体代码如下:
,,
' ' '//父组件
& lt; template>
& lt; div>
标题:& lt; input type=" text " v模型=癿ymessage祝辞& lt; br/比;
& lt;孩子们v模型=" mymessage "/比;
& lt;/div>
& lt;/template>
& lt; script>
进口的孩子’。/children.vue”;
出口默认{
数据(){
返回{
mymessage:“名”字,
}
},
组件:{
孩子们
}
}
& lt;/script>//子组件
& lt; template>
& lt; div>
& lt;输入类型=拔谋尽?value=" https://www.yisu.com/zixun/mymessage " @input=癱hangeValue”比;
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
模型:{
道具:“mymessage”,
事件:“输入”
},
道具:[' mymessage '),
方法:{
changeValue(事件){
这一点。美元发出(“输入”,event.target.value);
}
}
}
& lt;/script>
' ' '
1)提供/注入
提供/注入,允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下文关系成立的时间里始终生效
https://cn.vuejs.org/v2/api/provide-inject ,,,,
具体代码如下:
,,,
' ' '//父组件
& lt; template>
& lt; div>
& lt; h4>{{标题}}& lt;/h4>
& lt;孩子们/比;
& lt;/div>
& lt;/template>
& lt; script>
进口的孩子’。/children.vue”;
出口默认{
数据(){
返回{
标题:“父组件的标题”
}
},
提供(){
返回{
updateTitle: this.updateTitle
}
},
方法:{
updateTitle(标题){
这一点。标题=标题;
}
},
组件:{
孩子们
}
}
& lt;/script>//子组件
& lt; template>
& lt; div>
& lt;按钮@click=" changeAttr "祝辞修改父组件的属性& lt;/button>
& lt;孙子/比;
& lt;/div>
& lt;/template>
& lt; script>
从“进口的孙子。/grandson.vue ';
出口默认{
数据(){
返回{
}
},
注射:[' updateTitle '),
方法:{
changeAttr () {
this.updateTitle(“子组件修改标题”);
}
},
组件:{
孙子
}
}
& lt;/script>//孙组件
& lt; template>
& lt; div>
& lt;按钮@click=" changeAttr "祝辞修改祖先组件的属性& lt;/button>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
注射:[' updateTitle '),
方法:{
changeAttr () {
this.updateTitle(“孙组件修改标题”);
}
}
}
& lt;/script>
' ' '
