Vue学习笔记-Vue3中setup函数注意点

2023-12-13 05:34:00

setup编写示例

<script>
import {reactive} from 'vue'
export default {
  name: "DemoVue",
  props:['xxx','yy',...],
  setup(props,context){
    const data = reactive({
    	......
    })

    //setup必须有返回值
    return {
      data,
    }
  }
}
</script>

setup执行的时机

在beforeCreate()之前执行一次，并且此时输出this时是undefined

setup的参数

  • props：值为对象，包含组件外部传递过来，且组件内部声明接收了的属性
  • context：上下文对象，主要包含了attrs、slots、emit三个对象，其中：
    1. attrs：包含组件外部传递过来，但未在组件内部props配置中声明的属性，相当于this.$attrs
    2. slots：接收到的插槽内容，相当于this.$slots
    3. emit：分发自定义事件的函数，相当于this.$emit

文章来源:https://blog.csdn.net/theLuckyLong/article/details/134876844
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。