深度解析vue之组件之间传值调用方法的奇淫技巧
一、props / $emit
没什么说的,vue官网就够了,easy,没有所谓的奇淫技巧
二、 $children
/ $parent
this.$parent为父组件的实例对象,this.$children为子组件的实例对象
奇淫技巧:
1>当一个组件内有多个子组件或者一个子组件的父级有多个兄弟组件,不好找所对应的组件怎么办
name: 'fa-son',
components: {
list1,
list2
},
声明组件的时候加上name:为此组件赋名
然后,当你打印this.$parent的时候,
vm.$vnode(_parentVnode) 意思就是未经过 _render 函数处理的 vnode, vm._vnode 是经过 render处理过的
这下就可以区别了,但是记住调用一次$parent只能访问一次上级父组件,如果要访问祖父级this.$parent.$parent
三、ref
/ refs
如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例,可以通过实例直接调用组件的方法或访问数据
调用list1组件的list1方法
this.$refs.list1.list1()
fa-son根组件
<template>
<div>
<list1 ref="list1" />
<list2 ref="list2" />
fa-son
</div>
</template>
二与三一起说,因为组合键可以玩出骚操作!~
比如我现在是在list2组件下,需要执行list1组件的某个方法,
this.$parent.$refs.list1.list1();
四、provide
/ inject
![](https://img2018.cnblogs.com/i-beta/893672/201912/893672-20191212101709944-593622439.png)
5 EventBus
了解了解就行了,不建议使用
6 $attrs
与 $listeners
祖父fa-son.vue
<list1 ref="list1" :listen1="1" :listen2="2" :listen3="3" :listen4="4" />
父list1.vue
<template>
<div>
list1
{{$attrs.listen1}}
<list2Son v-bind="$attrs" />
</div>
</template>
console.log('listen1', this.$attrs);
![](https://img2018.cnblogs.com/i-beta/893672/201912/893672-20191212141548815-722528815.png)
inheritAttrs: false,
inheritAttrs为true,则,祖父组件给子组件传的值不在dom元素上显示,比如,input type这个值如果传到子组件会发生污染
https://www.jianshu.com/p/ce8ca875c337
$listeners
主要是隔代子传*父作用
孙子list1_son.vue
this.$emit('changeGen', '我是孙子改变根');
父
<template>
<div>
list1
{{$attrs.listen1}}
<list2Son v-bind="$attrs" v-on="$listeners" />
</div>
</template>
祖父
<list1 ref="list1" :listen1="1" :listen2="2" :listen3="3" :listen4="4" @changeGen='changeGen' /> changeGen(val) { this.fa_sonData = val; console.log('val', val); }