components/Parent.vue
<template> <div> 我是父组件 <br> 这里显示父级的msg:{{msg}} <Son></Son> </div> </template> <script> /* provide 、inject只能父级给子孙后代传递参数，而不知道子孙后代到底有多少，子孙后代怎么操作父级呢？ 解决这个问题就需要父级把自己也传递给子孙后代 */ import Son from '../components/Son'; export default { components: { Son, }, /* 传递组件本身不能使用对象模式，要使用函数模式 provide:{ test:"test provide inject", Parent:this, }, */ provide(){ return { test:"test provide inject", Parent:this, }; }, data() { return { msg: "我是父级的msg" }; }, methods: { changeMsg(msg) { this.msg = msg; }, }, } </script> <style scoped> </style>components/Son.vue
<template> <div> <hr> 我是子组件 <Grandson></Grandson> </div> </template> <script> import Grandson from '../components/Grandson'; export default { components: { Grandson, }, } </script> <style scoped> </style>components/Grandson.vue
<template> <div> <hr> 我是孙子组件 <br> 显示父组件provide中的test:{{test}} </div> </template> <script> export default { //孙子节点接收爷爷provide中定义的test inject:["test","Parent"], mounted () { console.log(this.Parent.msg); this.Parent.changeMsg("孙子更改后的父级msg"); }, } </script> <style scoped> </style>App.vue
<template> <div id="app"> <Parent></Parent> </div> </template> <script> import Parent from './components/Parent' export default { name: 'App', components: { Parent, } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>效果截图：
