vue2和vue3父-子传值、孙辈传值provide/inject

父-子传值和孙辈传值都可以用（非常简单）

一、静态数据传值

1.父组件

<template>
  <h1>数值----{{con}}</h1>
  <hello></hello>
</template>
<script>
import hello from '@/components/HelloWorld.vue'
export default {
  data () {
    return {
      con: '055',
      color:'red'
    }
  },
  provide () {
    return {
      con: this.con,
      color:this.color
    }
  },
  components: {
    hello
  }
}
</script>
<style>

</style>

2.子组件

<template>
  <h1 >hello-----{{con}}</h1>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  inject: ['con','color'],
  methods: {
  }
}
</script>

<style scoped lang="less">

</style>

运行结果：

 二、动态数据传值

1.父组件

需要引入一个computed

<template>
  <h1>数值----{{con}}--{{color}}</h1>
  <button @click="con ++">+1</button>
  --------------------------------
  <hello></hello>
</template>
<script>
import hello from '@/components/HelloWorld.vue'
//需要引入一个computed
import { computed } from 'vue'
export default {
  data () {
    return {
      con: '055',
      color: 'red'
    }
  },
  provide () {
    return {
      // con: this.con
      //动态传
      con: computed(() => this.con),
      color: computed(() => this.color)
    }
  },
  components: {
    hello
  }
}
</script>
<style>

</style>

2.子组件

使用值后面加个.value

<template>
//值后加个.value
  <h1 >hello-----{{con.value}}---{{color.value}}</h1>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  inject: ['con', 'color'],
  methods: {
  }
}
</script>

<style scoped lang="less">

</style>

运行结果：