import Grandson from './grandson.vue';
export default {
data() {
return {
}
},
inject: ['updateTitle'],
methods: {
changeAttr() {
this.updateTitle('子组件修改标题');
}
},
components: {
Grandson
}
}
</script>
// 孙组件
<template>
<div>
<button @click="changeAttr">修改祖先组件的属性</button>
</div>
</template>
<script>
export default {
inject: ['updateTitle'],
methods: {
changeAttr() {
this.updateTitle('孙组件修改标题');
}
}
}
</script>
```
2)$attrs和$listeners
组件A下面有一个组件B,组件B下面有一个组件C,如果想将组件A的数据和自定义事件传递给组件C,就可以使用$attrs和$listeners。
vm.$attrs: 当一个组件没有声明任何 prop 时(没有在props声明属性)，这里会包含所有父作用域的绑定 ，并且可以通过
v-bind="$attrs” 传入内部组件vm.$listeners: 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=”$listeners” 传入内部组件。
https://cn.vuejs.org/v2/api/#vm-attrs
具体
```
// 父组件
<template>
<div>
<Children :msg="msg" v-on:changeMsg="changeMsg"/>
</div>
</template> <script>
import Children from './children';
export default {
data() {
return {
msg: '下发数据',
test: '123'
}
},
components: {
Children
},
methods: {
changeMsg() {
this.msg = '修改后的数据';
}
}
}
</script>
// 子组件
<template>
<div>
<Grandson v-bind="$attrs" v-on="$listeners"/>
</div>
</template>
<script>
import Grandson from './grandson';
export default {
components: {
Grandson
}
}
</script>
// 孙组件
```
<template>
<div>
<h3>{{$attrs.msg}}</h3>
<button @click="change">修改数据</button>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
change() {
this.$emit('changeMsg')
}
}
}
