vue组件祖先/父亲/孙子传值:props, provide,inject,$attrs,$listeners,$emit,$on,

vue组件之间的传递分类:
1、父向子传递:props
2、子向父传递: e m i t 3 、 兄 弟 之 间 传 递 : 借 助 中 间 代 理 : emit 3、兄弟之间传递:借助中间代理: emit3emit,$on
4、祖先传给孙子:这个高级provide,inject

父子关系:parent =>children
祖先和孙子关系:parent=>grandSon
parent.vue
在这里插入图片描述
children.vue

vue组件祖先/父亲/孙子传值:props, provide,inject,$attrs,$listeners,$emit,$on,_第1张图片
这里的:
$attrs收集器:收集属性
$listeners收集器:收集事件
收集器收集会排除(props,class,style…)
在这里插入图片描述
grandSon.ue
vue组件祖先/父亲/孙子传值:props, provide,inject,$attrs,$listeners,$emit,$on,_第2张图片
vue组件祖先/父亲/孙子传值:props, provide,inject,$attrs,$listeners,$emit,$on,_第3张图片
兄弟之间传值:借助中间代理=》com.js 抛出一个实例化
$on:监听当前实例上的自定义事件。
$emit触发回调函数事件
把两个自组件first.vue/second.vue放到同一个父组件里面common.vue
first.vue
vue组件祖先/父亲/孙子传值:props, provide,inject,$attrs,$listeners,$emit,$on,_第4张图片
second.vue
vue组件祖先/父亲/孙子传值:props, provide,inject,$attrs,$listeners,$emit,$on,_第5张图片
common.vue
vue组件祖先/父亲/孙子传值:props, provide,inject,$attrs,$listeners,$emit,$on,_第6张图片
com.js
在这里插入图片描述
点击按钮之前
在这里插入图片描述
点击按钮之后
在这里插入图片描述
组件的问题这些差不多了,在项目开发中灵活运用,当然使用vuex也能完美的做到。同时面试官也喜欢问这类的问题。。。。。
欢迎大神指点!!

你可能感兴趣的:(vue组件完美,vue组件传值完美)