vue中的provide与inject

• provide和inject提供依赖注入
• 实现跨层级组件(祖孙)间通信

一、vue2中的provide与inject

<template>
	<div>
		<h2>父级组件</h2>
		<hr />
		<Child />
	</div>
</template>
<script>
	import Child from "./Child.vue";
	export default {
	    name:'Parent',
	    components: {Child},
		provide(){
			return {
				parentTest:this
				text:'你好'
			}
		},
		data() {
			return {
				color:'red'
			}
		},
		methods: {
            showMsg(msg){
                console.log(msg)
            }
        }
}
</script>

<template>
    <div>
    	<h3>子级组件</h3>
        <button @click="clickMe">点击我</button>
    </div>
</template>
<script>
    export default{
        name: 'Child',
        inject:['parentTest','text'],
        created(){
			console.log(this.parentTest.color); //----red
			console.log(this.text); //----你好
		}
        methods: {
            clickMe(){
                this.parentTest.showMsg("我要吃烤肉!")
            }
        }
    }
</script>

二、vue3中的provide与inject

<template>
	<div>
		<h2>父级组件</h2>
  		<hr />
  		<Child />
	</div>
</template>
<script lang="ts">
import { provide, ref } from 'vue'
import Child from './Child.vue'
export default {
  name: 'Parent',
  components: {Child},
  setup() {
    const color = ref('red');
    provide('color', color);
    const showMsg = (msg: string) => {
      console.log(msg);
    };
    provide("showMsg", showMsg);
    return {
      color,
      showMsg
    }
  }
}
</script>

<template>
	<div>
		<h3 :style="{ color }">子级组件</h3>
		<button @click="clickMe(text)">点击我</button>
	</div>
</template>

<script lang="ts">
import { inject } from 'vue'
export default {
  setup() {
    const color = inject('color');
    const clickMe = inject("showMsg");
    const text = "我想吃肉肉！";
    return {
      color,
      clickMe,
      text
    }
  }
}
</script>