父组件向子组件传值

父子组件传递数据时，通常使用的是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>