Vue3笔记 - setup的两个注意点

6.setup的两个注意点

• setup执行的时机

  • 在beforeCreate之前执行一次，this是undefined。

• setup的参数

  • props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
  • context：上下文对象
    • attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
    • slots: 收到的插槽内容, 相当于 this.$slots。
    • emit: 分发自定义事件的函数, 相当于 this.$emit。

<template>
  <Demo msg="你好啊" school="尚硅谷" @hello="showHelloMsg">
    <template v-slot:qwe>
      <span>尚硅谷</span>
    </template>
    <template v-slot:sdf>
      <span>尚硅谷2号</span>
    </template>
  </Demo>
</template>



<script>
/*  
  setup执行时机：
    在beforeCreate之前执行一次，this是undefined
  setup的参数
    props:值为对象，包含：组件传递过来，且组件内部声明接收了的属性
    context：上下文对象
      attrs:值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性， 相当于this.$attrs
      slots:收到的插槽内容，相当于this.$slots
      emit:分发自定义事件的函数，相当于this.$emit.
*/ 
import Demo from "./components/Demo.vue";
export default {
  name: "App",
  components: {
    Demo,
  },
  setup() {
    function showHelloMsg(value) {
      console.log(1111);
      alert(`你好啊，你触发了hello事件，我收到的参数是：${value}`);
    }
    return {
      showHelloMsg,
    };
  },
};
</script>

总结一下：

1. setup执行时机：在beforeCreate之前执行，this是undefined
2. setup的参数：
   • props:接收组件外部传递过来的数据，组件内部必须声明接收(传递未接收，有警告，接收未传，无警告)
   • context：上下文对象
     • （attrs(组件外部传递过来没有接收的属性)–> this.$attrs
     • slots(接收插槽内容)–> this.$slots
     • emit (自定义事件的函数)–>this.$emit）