当前位置:首页 > 技术文章 > 正文内容

Vue3,父组件子组件传值,provide(提供)和inject(注入)传值

父组件向子组件传值

父子组件传递数据时,通常使用的是props和emit,父向子传递使用props,子向父传递使用emit。

子组件接收3种方式

// 1、简单接收
props:["title","isShow"],
// 2、接收的同时对数据类型进行限制
props:{
  title:String,
  isShow:Boolean
},
// 3、最完整接收写法
props: {
  title: {
    type: String,
    default: "",
  },
  isShow: {
    type: Boolean,
    default: false,
  },
},

代码案例

父组件:demo04Manage.vue


<template>
  <div id="demo04">
    <h1>{{ name }}</h1>
    <Child :title="data.title" :isShow="data.isShow"></Child>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
import Child from "./childComponent.vue";
//
export default {
  name: "demo04",
  components: {
    Child: Child,
  },
  setup(props, context) {
    // 名称
    let name = ref("父组件.Demo04");
    // 等价与const isShow = ref(true)
    let data = reactive({
      title: "Demo4测试案例",
      isShow: true,
    });
    // return出去
    return {
      name,
      data,
    };
  },
};
</script>

子组件:childComponent.vue

<template>
  <div id="demo04Child">
    <h3>{{ name }}</h3>
    <div class="menu">{{ title }}================={{ isShow }}</div>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
//
export default {
  // 1、简单接收
  // props:["title","isShow"],
  // 2、接收的同时对数据类型进行限制
  // props:{
  //   title:String,
  //   isShow:Boolean
  // },
  // 3、最完整接收写法
  props: {
    title: {
      type: String,
      default: "",
    },
    isShow: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    //
    let name = ref("子组件.Demo04");
    //
    let data = reactive({
      //
    });
    // return出去
    return {
      name,
      data,
    };
  },
};
</script>

provide(提供)和inject(注入)传值

父传子时,使用的是props,如果父组件传子子组件时,先传给子组件,子组件再传给子子组件,如果多个子组件或多个子子组件使用时,就需要传很多次。像这种情况,可以使用provide()和inject()解决,不论组件嵌套多深,父组件都可以为所有子组件或子子组件提供数据,父组件使用provide()提供数据,子组件或子子组件inject()注入数据,同时兄弟组件之间传值更方便。

Composition API(组合式API)中使用:provide/inject,两个只能在setup期间调用,使用之前,必须从vue显示导入provide/inject方法。

Provide()

在setup中使用provide时,首先从vue显式导入provide 方法(import provide from ‘vue’),这个方法有两个属性 { name, value }。

Inject()

在setup函数中使用inject函数也需要显示的导入(import { inject } from ‘vue’),它也接受两个参数 { name, ‘默认值’(可选) };

代码案例

父组件:demo05Manage.vue


<template>
  <div id="demo05">
    <h1>{{ name }}</h1>
    <Child :title="title" :isShow="isShow"></Child>
  </div>
</template>
<script>
import { ref, reactive, provide, readonly } from "vue";
import Child from "./childComponent.vue";
//
export default {
  name: "demo05",
  components: {
    Child: Child,
  },
  setup(props, context) {
    // 名称
    let name = ref("父组件.Demo05");
    //
    provide("title", "Demo5测试案例");
    provide("isShow", readonly(true));
    // return出去
    return {
      name,
    };
  },
};
</script>

子组件:childComponent.vue

<template>
  <div id="demo05Child">
    <h3>{{ name }}</h3>
    <div class="menu">{{ title }}================={{ isShow }}</div>
  </div>
</template>
<script>
import { ref, reactive, inject } from "vue";
//
export default {
  // 1、简单接收
  // props:["title","isShow"],
  // 2、接收的同时对数据类型进行限制
  // props:{
  //   title:String,
  //   isShow:Boolean
  // },
  // 3、最完整接收写法
  props: {
    title: {
      type: String,
      default: "",
    },
    isShow: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    let name = ref("子组件.Demo05");
    //
    const title = inject("title");
    const isShow = inject("isShow");
    // return出去
    return {
      name,
      title,
      isShow,
    };
  },
};
</script>

相关文章

垃圾收费管理系统(垃圾收运管理系统)

今天来了解《#垃圾收费管理系统》,它包括如下功能:收费单位表格界面,类别表格界面,类别设置信息窗口,单位信息表格界面,单位信息信息窗口,缴费登记信息窗口,缴费登记表格界面,缴费登记的缴费单.1,到期提...

2020年最漂亮的7个Linux发行版(最受欢迎的linux发行版)

请关注本头条号,每天坚持更新原创干货技术文章。如需学习视频,请在微信搜索公众号“智传网优”直接开始自助视频学习1. 前言对于想学习Linux的朋友们,心中一定有疑问,哪个Linux版本比较好入门,Li...

2024年10 大 Linux 桌面发行版推荐

年已过半,现在是探究 2024 年最流行的 Linux 发行版的最佳时机。Linux 是一个开源操作系统,构建在 Linux 内核上,并集成了 GNU shell 实用程序、桌面环境、应用程序、包管理...

linux发行版-openSUSE Agama 15安装程序发布:带来多项可用性升级

openSUSE旗下仍在开发中的全新Linux安装工具Agama,于近日推出v15版本,带来了界面增强、实用新功能等一系列改进,为用户带来更顺畅的系统安装体验!界面优化:细节之处见用心新版本在本地化设...

Ubuntu 24.10发行版登场:Linux 6.11内核、GNOME 47桌面环境

IT之家 10 月 11 日消息,Canonical 昨日发布新闻稿,正式推出代号为 Oracular Oriole 的 Ubuntu 24.10 发行版。新版在内核方面升级到最新 6.11 版本,并...

据说是可以替代 Windows 的 5个 Linux 发行版

现如今有数以千计的 Linux 发行版可供您使用,然而人们却无法选择一个完美的操作系统来替代 Windows。 使用 Windows 时,傻瓜都能操作自如,同样的方法却不适用于 Linux。在这里,您...