爷孙组件传递数据

对于父子组件的传递数据，可以通过prop进行传递，但是如果是爷爷向孙子传递数据呢？我们需要在爸爸中定义defineProps拿到爷爷传来的数据，然后在孙子中也定义defineProps，爸爸把刚刚拿到的数据在传递给孙子。

对于爸爸来说根本用不到这些数据，只是孙子要用到。那有没有一种方法让爷爷直接传递数据给孙子呢？答案肯定是有的，这里说的是依赖注入的方法，还有一种使用vuex的方法以后再说吧。

传递数据

provide()函数有两个参数，第一个参数是注入名，第二个参数是传递的数据。通过这个函数可以把爷爷中的数据传递给孙子。

inject()函数，这个函数也有两个参数，第一个参数就是provide()函数的第一个参数，第二个参数为可选，表示爷爷没有传递数据过来时的默认值。这个函数用在孙子组件中，用于接收数据。

爷爷

<template>
  <div class="main">
    <input v-model="msg">
    <Child></Child>
  </div>
</template>

<script setup>
import Child from './components/Child.vue'
import {provide, reactive,ref} from 'vue'
const msg=ref('holy shit')
provide('msg',msg)
</script>

父亲

<template>
  <GrandChild></GrandChild>
</template>

孙子

<template>
  <p>爷爷传来的值{{msg}}</p>
</template>

<script setup>
import {inject} from 'vue'
const msg=inject('msg')
</script>

结果如下，可以看到在爷爷中provide把msg传递给孙子，然后孙子使用inject函数接收，把msg渲染到页面上。

数据更新的方法

孙子拿到数据后可以直接在自己的组件内更改这个数据，但是并不建议这样做。我们可以在爷爷传递数据的同时把更改数据的方法也传递过去。先在爷爷中定义一个更改函数，然后把这个函数也传递过去。

爷爷

<template>
  <div class="main">
    <input v-model="msg">
    <Child></Child>
  </div>
</template>

<script setup>
import Child from './components/Child.vue'
import {provide, reactive,ref} from 'vue'
const msg=ref('holy shit')
//定义更新的方法
const updateMsg=()=>{
  msg.value='grandPa provide a method to change msg'
}
provide('msg',{
  msg,
  updateMsg //把方法也传递过去
})
</script>

父亲

<template>
  <GrandChild></GrandChild>
</template>

孙子

<template>
  <p>爷爷传来的值{{msg}}</p>
  <button @click="updateMsg">change</button>
</template>

<script setup>
import {inject} from 'vue'
let {msg,updateMsg}=inject('msg') //解构出数据和方法
</script>

爷爷把数据和改变方法一起传了过去，孙子解构出数据和方法，当点击按钮时就触发这个改变方法从而改变数据。