vue如何将父页面的数据，传给孙以及更深的组件呢？

进阶的小叮当2023-11-30 18:34

我们在vue前端开发的过程中，经常会将一个页面拆分成多个组件来组装，但是当页面复杂的时候，可能会出现组件嵌套组件再嵌套组件...

这时候刚好有一个参数，我们在父页面获取到了，在孙组件的孙组件的....需要引用....

emmm... 要用props一层一层的传递下去嘛，这样代码显得臃肿，说不定下一个人在优化的时候，就给删掉了怎么办....这是一个很严重的问题

我们先看一下props

html 复制代码

<!-- one.vue -->
<two :message="message" />
data(){ return { message: "我是父页面的消息！" } }

html 复制代码

<!-- two.vue -->
<three :message="message" />
props(){ message: String }

html 复制代码

<!-- three.vue -->
<four :message="message" />
props(){ message: String }

html 复制代码

<!-- four.vue -->
<div>{{ message }}</div>
props(){ message: String }

这参数传递，看了直呼好家伙，真怕哪一级传着传着就丢了，真的就是我不使用参数，我只是参数的搬运工，那有没有什么方法能简化参数的传递呢？接下来我们看一下官方提供的两个钩子。

provide inject

下面是官方提供的钩子provide和inject，简化了深层传递参数的方案

html 复制代码

<template> <Child /> </template>
<script>
import Child from './Child.vue'
export default {
  components: { Child },
  provide() { return { message: 'hello' } }
}
</script>

html 复制代码

<template>
  <GrandChild />
</template>
<script>
import GrandChild from './GrandChild.vue'
export default {
  components: { GrandChild }
}
</script>

html 复制代码

<template>
  <p> {{ message }} </p>
</template>
<script>
export default {
  inject: ['message']
  // inject: {
  //     message: {
  //         from: 'message', // 当与原注入名同名时，这个属性是可选的
  //         default: 'default value' 
  //     }, 
  // }
}
</script>

写在最后

当然，也有其他的方法进行传递，比如Bus的方式，存储在一个公共的区域，再进行引用和读取，或者vuex里，都是可以的，具体还是看个人取舍了。