vue组件调用祖父组件的方法
在开发过程中,为了方便,我们经常会封装一些组件以便多次使用
但有时候封装的组件过多,组件嵌套层级太多,孙子组件有时候想使用祖父组件的方法(不是使用this.$emit()通过自定义事件调用),使用方法如下:
1.使用this.$parent
vue中,this.$parent可以取到当前组建的父组件
所以如果嵌套层级关系不是很深,且知道嵌套层级的话(如只有两层),可以使用以下方法调用:
this.$parent.$parent.fatherMethod() // 在孙子组件中调用祖父组件的fatherMethod()方法
但是这样使用限制太多,嵌套层级关系不能太多,,并且需要明确知道嵌套了几层
所以可以使用下面的方法
2.使用provide和inject
在父组件中提供provide,在子组件中引入inject即可
名词解释
provide：Object | () => Object
inject：Array | { [key: string]: string | Symbol | Object }
provide：提供依赖``是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。
inject： 注入依赖一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值。
provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。
具体代码如下:
<!-- one -->
<template>
<div>
<div>祖父组件-第一层</div>
<el-button @click="dianji" size="mini">第一层</el-button>
<two></two>
</div>
</template>
<script>
import two from "./two.vue"
export default{
components:{
two
},
data(){
return{}
},
provide() {
return {
fatherMethod: this.dianji
}
},
methods:{
dianji() {
console.log("祖父组件的方法")
},
}
}
</script>
<!-- two -->
<template>
<div>
<div>第二层组件</div>
<el-button @click="fatherMethod" size="mini">第二层</el-button>
<three></three>
</div>
</template>
<script>
import three from './three.vue'
export default{
components:{
three
},
data() {
return {}
},
inject:["fatherMethod"],
}
</script>
<!-- three -->
<template>
<div>
<div>第三层组件</div>
<el-button @click="fatherMethod" size="mini">第三层</el-button>
</div>
</template>
<script>
export default{
data() {
return{}
},
inject:["fatherMethod"],
}
</script>
这样便可以在父组件和子组件中都调用父组件的方法了
下面是vue官网的例子
例如，我们有这样的层次结构：
Root
└─ TodoList
├─ TodoItem
└─ TodoListFooter
├─ ClearTodosButton
└─ TodoListStatistics
如果要将 todo-items 的长度直接传递给 TodoListStatistics，我们要将 prop 逐级传递下去：TodoList -> TodoListFooter -> TodoListStatistics。通过 provide/inject的方式，我们可以直接执行以下操作：
const app = Vue.createApp({})
app.component('todo-list', {
data() {
return {
todos: ['Feed a cat', 'Buy tickets']
}
},
provide: {
user: 'John Doe'
},
template: `
<div>
{{ todos.length }}
<!-- 模板的其余部分 -->
</div>
`
})
app.component('todo-list-statistics', {
inject: ['user'],
created() {
console.log(`Injected property: ${this.user}`) // > 注入的 property: John Doe
}
})
但是，如果我们尝试在此处 provide 一些组件的实例 property，这将是不起作用的：
app.component('todo-list', {
data() {
return {
todos: ['Feed a cat', 'Buy tickets']
}
},
provide: {
todoLength: this.todos.length // 将会导致错误 `Cannot read property 'length' of undefined`
},
template: `
...
`
})
要访问组件实例 property，我们需要将 provide 转换为返回对象的函数：
app.component('todo-list', {
data() {
return {
todos: ['Feed a cat', 'Buy tickets']
}
},
provide() {
return {
todoLength: this.todos.length
}
},
template: `
...
`
})
这使我们能够更安全地继续开发该组件，而不必担心可能会更改/删除子组件所依赖的某些内容。这些组件之间的接口仍然是明确定义的，就像 prop 一样。
实际上，你可以将依赖注入看作是“长距离的 prop”，除了：
- 父组件不需要知道哪些子组件使用了它 provide 的 property
- 子组件不需要知道 inject 的 property 来自哪里
处理响应性
在上面的例子中，如果我们更改了 todos 的列表，这个变化并不会反映在 inject 的 todoLength property 中。这是因为默认情况下，provide/inject 绑定并不是响应式的。我们可以通过传递一个 ref property或 reactive 对象给 provide 来改变这种行为。在我们的例子中，如果我们想对祖先组件中的更改做出响应，我们需要为 provide 的 todoLength 分配一个组合式 API computed property：
app.component('todo-list', {
// ...
provide() {
return {
todoLength: Vue.computed(() => this.todos.length)
}
}
})
app.component('todo-list-statistics', {
inject: ['todoLength'],
created() {
console.log(`Injected property: ${this.todoLength.value}`) // > 注入的 property: 5
}
})
在这种情况下，任何对 todos.length 的改变都会被正确地反映在注入 todoLength 的组件中。
设置默认值
const Child = {
inject: {
foo: {
from: 'bar', // 可以不设置from
default: 'foo' // 如果是方法则可以是： () => {}
}
}
}
