适用于一下场景中的组件通行
- 项目比较小,不适合用VueX对状态进行处理
- 组件嵌套比较深,使用props会很繁琐
缺点
- 代码的可读性比较低
- 代码维护性比较低
基本概念
inheritAttrs
默认情况下,子组件无法获取到
props
中未定义的值。通过将
inheritAttrs=true
禁止这种默认行为,配合
$attr
获取到父作用域中所有的属性(除了props传递的属性以及Class或者Style)来进行父组件向子组件传值
vm.$attr
只读的VUE实例属性,包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外),并且可以通过
v-binnd=$arrts
传入内部组件中
vm.$listeners
包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=”$listeners” 传入内部组件——在创建更高层次的组件时非常有用。
DEMO
App.vue
<template>
<child1 :words1="text1" :words2="text2" :words3="text3" v-on:event1="goEvent1" v-on:event2="goEvent2">
</child1>
</template>
<script>
import Child1 from '@components/child1.vue'
export default {
name: 'app',
data () {
return {
text1: 1,
text2: 2,
text3: 3
}
},
methods: {
goEvent1() {
console.log('child 提交成功');
},
goEvent2(value) {
console.log(value);
}
}
}
</script>
child1.vie
<template>
<div class="child-1">
<p>props: {{words1}}</p>
<p>$attrs: {{$attrs}}</p>
<button @click="submit()">提交</button>
<hr>
<child2 v-bind="$attrs" v-on="$listeners"></child2>
<!-- 通过$listeners将父作用域中的v-on事件监听器,传入child2,使得child2可以获取到app中的事件 -->
</div>
</template>
<script>
import Child2 from './child2.vue'
export default {
name: 'child1',
props: ['words1'],
data() {
return {};
},
inheritAttrs: false,
components: { Child2 },
methods: {
submit () {
this.$emit('event1', 'child1 提交事件')
}
}
}
</script>
child2.vue
<template>
<div>
<div class="child-2">
<p>props: {{words2}}</p>
<p>$attrs: {{$attrs}}</p>
<input v-model="inputValue" name="" id="" @input="goInput">
</div>
</div>
</template>
<script>
export default {
name: 'child2',
props: ['words2'],
data() {
return {
inputValue: ''
};
},
inheritAttrs: false,
mounted() {
},
methods: {
goInput () {
this.$emit('event2', this.inputValue);
}
}
}
</script>
以上是通过学习,我对这种通信方式的总结,对于我来说,可能不常用,不过也加深了我对组件的理解,大家多多交流吧~