vue3 (setUp方法的2个注意点)

父组件

<template>
  <demo @hello="hello" msg="111" age="22">
    <template v-slot:qwe>
      <span>slotqwe</span>
    </template>
  </demo>
</template>
 <script>
import demo from "@/components/demo.vue";
export default {
  components: { demo },
  setup() {
    function hello(value) {
      console.log(value);
    }
    return { hello };
  }
};
</script>
<style lang="scss">
</style>

子组件

<template>
  <button @click="test">测试触发一下Demo组件的Hello事件</button>
  <div class>{{msg}}</div>
  <div class>{{age}}</div>
  <div class>{{person.name}}</div>
  <div class>{{person.age}}</div>
  <!-- <slot name="qwe"></slot> -->
</template>

<script >
import { reactive } from "vue";
export default {
  // 定义提交的事件
  emit: ["hello"],
  //   props:['msg','age'],
  //   或者
  props: {
    msg: { type: String, default: "" },
    age: { type: String, default: "" }
  },
  setup(props, context) {
    ////props接收的是父组件传输的参数
    console.log(context, "contextcontext");
    // props不接收值 父组件传输的值就保存在context下的attrs中
    console.log(context.attrs, "attrs");
    console.log(props.msg, "props"); //111
    console.log(context.slots, "---slots---"); //插槽 获取父组件传输的插槽的内容
    let person = reactive({
      name: "郑州",
      age: 11
    });
    function test() {
      // emit提交触发父组件的自定义事件
      context.emit("hello", 666);
    }
    return { test, person };
  }
};
</script>

<style lang="scss" scoped>
</style>