Vue provide、inject使用/实例

最新推荐文章于 2024-10-18 15:58:53 发布

《独白》

最新推荐文章于 2024-10-18 15:58:53 发布

阅读量75

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_45149139/article/details/129989552

版权

本文详细介绍了Vue.js中provide和inject的使用方法，用于在组件间进行非props方式的数据传递。提供者组件通过provide对象定义要共享的数据，而接收者组件则通过inject选项来接收这些数据。示例包括了父组件、子组件以及孙子组件的代码实现。

摘要由CSDN通过智能技术生成

用法

provide
一个对象，或者是一个返回对象的函数。
对象内包含想要传递的内容，即属性和属性值
注意：不传对象会报错，字符串数组，或者一个对象。

inject

返回字符串数组，或者一个对象。

父组件代码示例

<template>
  <div>
    <h1>父组件</h1>
    名字：<input v-model="obj.name">
    年龄：<input v-model="update.age" >
    <parent></parent>
  </div>
</template>
<script>
import parent from '@/layout/components/subcomponent/child.vue';
export default {
    components: {
    parent,
  },
  data(){
    return{
      obj:{
        name:'张三',
      },
      update:{
        age:'18',
      },
    }
  },
  provide(){
    return {
      obj: this.obj, 
      update: this.update,
    }
  },
}
</script>