Vue中父子组件的通信方式

一、Props + $emit

Props：父传子

父组件Parent.vue：
<Child :message="message" @changeMessage="message = $event" />

$emit：子传父

子组件Child.vue：
this.$emit('changeMessage','Bye')

在子组件里用$emit自定义一个事件并传参，父组件里监听事件

二、回调函数（callBack）

父传子：将父组件里定义的method作为props传入子组件

父组件Parent.vue：
<Child :changeMsgFn="changeMessage">
methods:changeMessage(){this.message = 'Bye'}
子组件Child.vue：
<button @click="changeMsgFn">
props:['changeMsgFn']

三、$parent + $children

可以获取父组件实例和子组件实例的集合

父组件Parent.vue：
this.$children[0].number = 50
子组件Child.vue：
getParentMessage(){return this.$parent.massage
}

四、provide + inject

父组件Parent.vue：
export default{provide:{message:'我是父组件里通过provide提供的信息'}
}
子组件Child.vue：
export default{inject:['message']
}

五、$attrs + $listeners

$attrs 包含了从父组件传过来的所有props属性

适用于多级通信

父组件Parent.vue：
<Child :name="name" :age="age"/>子组件Child.vue：
<GrandChild v-bind="$attrs" />孙子组件GrandChild
<p>姓名：{{$attrs.name}}</p>
<p>年龄：{{$attrs.age}}</p>

$listeners包含了父组件监听的左右事件

父组件Parent.vue：
<Child :name="name" :age="age" @changeNameFn="changeName"/>子组件Child.vue：
<button @click="$listeners.changeNameFn"></button>

六、ref 获取组件实例

父组件Parent.vue：
<Child ref="childComp"/>
<button @click="changeName"></button>
changeName(){console.log(this.$refs.childComp.age);this.$refs.childComp.changeAge()
}
子组件Child.vue：
data(){return{age:20}
},
methods(){changeName(){this.age=15}
}

Vue中父子组件的六种通信方式相关推荐

vue中父子组件先后渲染_Vue中父子组件执行的先后顺序
前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...
vue中父子组件及 watch用法
父子组件及 watch vue中父子组件及 watch用法 - coder_zhang123456 - 博客园
Vue中父子组件传值的多种方式
vue中父子组件传值 vue中的父子组件传值,值得注意的是要遵守单向数据流原则.所谓单向数据流原则,简单的说就是父组件的数据可以传递给子组件,子组件也可以正常获取并使用由父组件传过来的数据:但是,子组 ...
通过大头儿子和小头爸爸，给女朋友讲明白了vue中父子组件的传值
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法感兴 ...
vue中父子组件先后渲染_VUE如何实现子父组件、父子组件、兄弟组件传值
父子组件传值: 父组件定义: 代码示例子父组件传值: 父组件方法定义: 子组件执行父组件方法定义: methods: { closeOrOpenLeftMenu() { if (this.isLef ...
六十一、Vue中父子组件传值和组件参数校验
@Author:Runsen @Date:2020/10/17 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的日积月累,需要强大 ...
vue中父子组件先后渲染_vue父子组件传值（子传父，非父子组件传值）
1. 子组件向父组件传值子组件: <template><div>子组件:<span>{{childValue}}</span><!-- 定义一个 ...
vue中父子组件先后渲染_vue父子组件钩子函数的执行顺序
加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount-& ...
vue中父子组件通信的坑
转自:https://www.cnblogs.com/goloving/p/8660407.html 当在一个组件中,使用了其他自定义组件时,就会利用子组件的属性和事件来和父组件进行数据交流. 父子组 ...

Vue中父子组件的六种通信方式

Vue中父子组件的通信方式

Vue中父子组件的六种通信方式相关推荐

最新文章

热门文章