父子传值
在父组件中使用provide设置msg
<template>
<div id="app">
<h1>根组件</h1>
<Pchild></Pchild>
</div>
</template>
<script>
import Pchild from "@/components/Pchild.vue";
export default {
name: "App",
components: {
Pchild,
},
provide:{
msg:'儿子你要听话',
},
};
</script>
在子组件中使用inject接收msg
<template>
<div >
<h3>{{msg}}</h3>
<Sun></Sun>
</div>
</template>
<script>
import Sun from '@/components/Sun.vue'
export default {
name:"pchild",
inject:['msg'],
components:{
Sun
}
}
</script>
祖孙传值
在父组件中设置一个sunMsg值
在子组件中导入孙组件
在孙组件中使用inject存放sunMsg
特点:
可以父传子 也可以爷爷传孙子 可以向下传递
不可以兄弟之间传值,兄弟传值建议使用事件总线的方式