[JavaScript知识库]vue3_setup

参数

setup两个参数, 第一个参数是上面经过props声明过后的父组件传递过来的数据(需要经过props声明)
第二个参数context包含三个常用的属性
1. attr, 该属性里保存的是父组件传递过来但props中未声明的数据
2. emit, 即this.$emit, 可以触发父组件传递的函数
3. solt, 和插槽有关的, 后续再议
其实对于第二个参数, 更多的时候直接解构赋值, 直接就{attr, emit, …}

import { defineComponent } from 'vue'
export default defineComponent({
  props: { data: String, setUp: String },
  setup(props, context) {
    console.log(props)
    console.log(context)
    context.emit('fun', 'emit')
  },
})

返回值

在setup中返回的对象中, 数据则与data中的数据合并, 函数则与methods合并
若有重复的, setup都优先
这也就解释了为什么在这里即使不使用reactive也能有数据的响应了
再强调一点, vue3中的data和method都是经过proxy代理对象代理的
data和methods以及setup返回的都在该代理对象中

==================
注意: 在setup中无法直接访问到data和methods中的数据, 但是methods可以访问到setup中的属性和方法
并且setup不能被async修饰, 因为此时返回的是一个promise而不再是一个对象

import Child from './Child.vue'
import { defineComponent } from 'vue'
export default defineComponent({
  data() {
    return {
      data: '我是data中的数据',
    }
  },
  methods: {
    fun2() {
      // console.log('我是methods中的函数')
    },
  },
  setup() {
    let setUp = '我是setup中的数据'
    let fun = (val: string) => {
      // console.log('我是setup中的函数')
      console.log(val)
    }
    return {
      setUp,
      fun,
    }
  },
  mounted() {
    // console.log(this)
  },
  components: {
    Child,
  },
})