Vue官方文档(25):父组件通过provide向子组件传递数据，子组件通过inject接收

最新推荐文章于 2023-04-25 09:14:19 发布

amadeus_liu2

最新推荐文章于 2023-04-25 09:14:19 发布

阅读量257

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/amadeus_liu2/article/details/127638540

版权

Vue 专栏收录该内容

70 篇文章 0 订阅

订阅专栏

一、父组件：

<template>
 <div >
  <div >
    <p>inject 示例</p>
    <Child></Child>
  </div>

 </div>


</template>


 <script>
 import Child from './child.vue'
export default {
  name: 'parent',
  components: {
    Child
  },
  
  provide () {  
    return {
      userInfo: this.userInfo
    }
  },
 
  data(){
    return {
      userInfo: {
        username: 'amadeus2022',
        password: 'tju'

      }
    }
  },
}
    </script>

<style >
  

</style>

二、子组件

<template>
  <div >
    <p>{{ userInfo.username }}</p>
  </div>
</template>

<script>
  export default {
    name: "child",
    inject: ['userInfo'],
    data() {
      return {
        
      }
    },
  }
</script>