本文介绍了如何在Vue应用中使用provide和inject功能实现跨组件的数据传递，包括如何处理非响应类型数据以及在组件层级结构中利用这些特性。重点讲解了如何在函数中正确使用provide和在组件中注入数据的方法。
//provide,inject能够跨组件将数据传递，就是说如果有像需要子传父this.$emit的多层，才能把数据传递的情况使用很方便
//需要注意的是不能直接在provide函数里面写函数，因为在函数里面this指向window,所以要在methods方法里面写函数，然后命名：this引用这个函数
//另外由于基本数据类型有失去响应性的原因，就需要用计算属性写函数的形式成为引用类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>根</div>
<div>{{ appMessage }} <button @click="appMessage = '你好'">修改message</button></div>
<first></first>
</div>
<script src="./lib/vue.global.js"></script>
<script>
const stu = {
name: '张三',
nickname: this.name
}
</script>
<script>
Vue
.createApp({
data() {
return {
appMessage: '这是 App 在 data 中定义的 message',
appTodos: [],
}
},
methods: {
todoAdd() {
this.appTodos.push(54)
},
},
provide() {
return {
message: Vue.computed(() => this.appMessage),
todos: Vue.computed(() => this.appTodos),
add: this.todoAdd
}
},
})
.component('first', {
template: `<div>第一层<second></second></div>`,
})
.component('second', {
template: `<div>第二层<third></third></div>`,
})
.component('third', {
template: `<div>
第三层
共享到的根数据是: {{ message }}，数组长度: {{ todos.length }}
<fourth></fourth>
</div>`,
inject: ['message', 'todos'],
})
.component('fourth', {
template: `
<div>第四层</div>
<button @click="add">使用祖先节点中共享的方法</button>
`,
inject: ['add'],
})
.mount('#app')
</script>
</body>
</html>
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
