vue2.0 非父子组件（爷孙传参）注：不是响应式的

最新推荐文章于 2024-03-29 17:00:45 发布

魏天

最新推荐文章于 2024-03-29 17:00:45 发布

阅读量428

点赞数

文章标签： javascript typescript vue.js

本文链接：https://blog.csdn.net/weixin_44647098/article/details/123132322

版权

爷爷组件

<template>
{{title}}
  <button @click="setTitle">改变title</button>
  <br>
  <Son />
</template>

<script>
import Son from "./components/Son"
export default {
 
  components:{
    Son
  },
  //下面两种方式 要是穿对象的话就得用return的方式        
  // provide:{
  //   title:title,
  //   userInfo:{
  //     name:"张三",
  //     age:40
  //   }
  // },

   provide(){
     return{
        title:this.title,
        userInfo:{
          name:"张三",
          age:40
        }
     }
  },
  methods:{
    setTitle(){
      this.title = "修改后的Title"
      console.log(this.title)
    }
  }

}
</script>

<style>

</style>

父组件

<template>
  <Grandson />
</template>

<script>
import Grandson from "./Grandson"
export default {
  components:{
    Grandson
  }

}
</script>

<style>

</style>

孙子组件

<template>
   孙子 {{title}}
   <br/>

   {{userInfo}}
</template>

<script>
export default {
    inject:["title","userInfo"]
  

}
</script>

<style>

</style>