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

vue组件之间的传递分类：1、父向子传递：props2、子向父传递：emit3、兄弟之间传递：借助中间代理：emit3、兄弟之间传递：借助中间代理：emit3、兄弟之间传递：借助中间代理：emit,$on4、祖先传给孙子：这个高级provide,inject父子关系：parent =>children祖先和孙子关系：parent=>grandSonparent.vue.

小白之路！

15494人浏览 · 2019-03-12 22:19:43

小白之路！ · 2019-03-12 22:19:43 发布

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

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

在这里插入图片描述
这里的：
$attrs收集器:收集属性
$listeners收集器：收集事件
收集器收集会排除（props,class,style…）

grandSon.ue

兄弟之间传值：借助中间代理=》com.js 抛出一个实例化
$on:监听当前实例上的自定义事件。
$emit触发回调函数事件
把两个自组件first.vue/second.vue放到同一个父组件里面common.vue
first.vue
在这里插入图片描述
second.vue

common.vue

com.js

点击按钮之前

点击按钮之后

组件的问题这些差不多了，在项目开发中灵活运用，当然使用vuex也能完美的做到。同时面试官也喜欢问这类的问题。。。。。
欢迎大神指点！！

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^