上一篇：

vue3数据变量的修改https://blog.csdn.net/qq_42543244/article/details/122146552在使用过框架的过程中，有关组件传值是必不缺少的一部分，今天主要记录一下有关vue3组件传值的用法！

父组件：

我的父组件定义如下

<template>
  <h1 v-show="data.title">标题：我是子组件传递过来的===>{{ data.title }}</h1>
  <demo
    msg="你好啊"
    school="洛阳理工"
    :fraction="100"
    @child-click="childClick"
  >
    <h2>默认插槽</h2>
    <template v-slot:button>
      <button>具名插槽点击</button>
    </template>
  </demo>
</template>

<script>
import { reactive } from "vue";
import Demo from "@/components/Demo.vue";
export default {
  name: "App",
  components: {
    Demo,
  },
  setup() {
    let data = reactive({
      title: "",
    });

    // 接收子组件发送出来的事件
    function childClick(e) {
      data.title = e;
    }

    return {
      data,
      childClick,
    };
  },
};
</script>

子组件：Demo.vue

<template>
  <h2>姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <h2>学校：{{ school }} {{ person.school }}</h2>
  <h2>信息：{{ msg }}</h2>
  <h2>分数：{{ fraction }}</h2>
  <div>
    <!-- 默认插槽 -->
    <slot></slot>
    <!-- 具名插槽 -->
    <slot name="button"></slot>
  </div>

  <button @click="test">子组件点击</button>
</template>

<script>
import { reactive } from "vue";
export default {
  name: "Demo",
  /* 
   setup的执行顺序是要早于 beforeCreate周期的 ，执行一次，在setup中输出this是undefined

   setup接收两个参数：
    props：值为对象，包含：组件外部传递过来的，且在组件内部声明接收的属性
    context：上下文对象
            attrs:值为对象，包含组件外部传递过来的，但是未在props声明的属性，相当于vue2中的this.$attrs
            slots:收到的插槽的内容，相当于vue2中的this.$slots
            emit:分发自定义事件的函数，相当于vue2中的this.$emit

*/
  // props此处与vue2写法一致即可
  props: {
    msg: {
      type: String,
      default: "",
    },
    fraction: {
      type: Number,
      default: 0,
    },
    school: {
      type: String,
      default: "",
    },
  },
  //emits 需要去定义子组件中抛出去的事件，不写也可正常运行，但是控制台会出现警告，请特别注意一下
  emits: ["child-click"],
  setup(props, context) {
    //常用写法可用解构方式 (props, {attrs,emit})

    /* 在此处就可以取到props,我们可以直接使用props来进行业务逻辑，应用场景
    （比如父组件传给子组件一个id，我们可以在这里取到id值进行数据的请求） */
    console.log("props===>", props);
    console.log("attrs===>", context.attrs);
    console.log("slots===>", context.slots);
    console.log("emit===>", context.emit);
    let person = reactive({
      name: "小明",
      age: 18,
      school: props.school, //我们也可以把props的内容给我们使用reactive，或者ref声明的变量
    });

    function test() {
      context.emit("child-click", "123456"); //向父组件抛出事件

      // emit("child-click", "123456"); //如果上放context采用的解构的方式，直接emit发送事件即可
    }

    return {
      person,
      test,
    };
  },
};
</script>