Vue子组件传值

父子组件

祖孙组件

层层嵌套关系的组件：
例如： A 是 B的父组件，B 是 C的父组件，如果想在C组件中获取A组件的值，不必层层传递，可以用：provide/inject，直接A->B、A->C。

provide(‘参数名’， ‘参数值’) // 传递参数
inject(‘参数名’) // 接收参数

如果想要传递的数据是响应式的，需要通过ref或reactive传递给provide来实现

Vue3写法：

// A组件
<template>
    <Children />
    <button @click="handleClick">点击实现数据改变</button>
</template>

<script>
import Children from '@/components/children'
import { provide, ref} from 'vue'
export default {
  name: 'productList',
  components: { Children },
  setup() {
      const state = ref(1)
	  // 传递名为pareData的数据，值为A中的state
	  // 传递的参数是非响应式的，可以通过ref或reactive来实现响应式
      provide('parentData', state)

      const handleClick = () => {
          // 点击改变数据会发现B组件和C组件的参数也会跟着发生变化 
          state.value++
      }
      return {
          state,
          handleClick
      }
  }
}
</script>

// B组件（Children 组件）
<template>
   // 引入C组件
   <Grandson/>
</template>

<script>
import Grandson from '@/components/grandson'
export default {
  name: 'chilDren',
  props: {},
  components: { Grandson},
  setup() {
      return {}
  }
}
</script>

// C组件（Grandson 组件）
<template>
    <div>测试组件传值{{ info }}</div>
</template>

<script>
import { inject } from 'vue'
export default {
  name: 'grandSon',
  props: {},
  setup() {
    // 接收从A组件传过来的参数 
    const info = inject('parentData')
    return {
      info
    }
  }
}
</script>

兄弟组件