vue父子组件通信方式哪几种

第一种:props和$emit()

parent.vue





children.vue






按按钮之前:
vue父子组件通信方式哪几种_第1张图片
按按钮之后:
vue父子组件通信方式哪几种_第2张图片

第二种,回调函数callback

parent.vue







点击按钮前:
在这里插入图片描述

点击按钮后:
在这里插入图片描述

第三种,$parent和$children

parent.vue




children.vue






点击“改变子number”前:

vue父子组件通信方式哪几种_第3张图片
点击“改变子number”后
vue父子组件通信方式哪几种_第4张图片

children.vue






parent.vue




点击前:
vue父子组件通信方式哪几种_第5张图片
点击后:
vue父子组件通信方式哪几种_第6张图片

第四种,provide和inject

parent.vue




children.vue




运行结果:
在这里插入图片描述

第五种,$attrs+$listeners

parent.vue




children.vue




GrandChildren.vue






运行结果(从父亲传到了孙子):
vue父子组件通信方式哪几种_第7张图片
点击按钮后:
vue父子组件通信方式哪几种_第8张图片

第六种,ref

parent.vue




children.vue




点击后:
在这里插入图片描述

你可能感兴趣的