组件中setup的执行顺序
创建组件，先初始化props，再依次执行setup、beforeCreate、created
<template lang="">
<div>
<el-input @change="setName" v-model="name">
</el-input>
<el-input @change="setTitle" v-model="title">
</el-input>
</div>
</template>
<script>
import { reactive, toRefs } from 'vue'
export default {
name: 'Input',
props: {
name: {
default: () => 'joahyan'
},
title: {
default: () => 'learn Vue3.0'
}
},
setup(props) {
// 先初始化props，后执行setup
// 创建组件先执行setup、beforeCreate、created
console.log('props', props); // props Proxy {name: "joahyan", title: "learn Vue3"}
console.log('执行setup方法');
},
beforeCreate() {
console.log('执行beforeCreate');
},
created() {
console.log('执行created');
},
methods: {
setName(e) {
this.$emit("update:name", e)
},
setTitle(e) {
this.$emit("update:title", e)
}
},
}
</script>
<style lang="">
</style>
setup的参数(props,context)
props: 是一个对象,里面有父级组件向子级组件传递的数据,并且是在子级组件中使用props接收到的所有的属性
context：上下文对象，可以通过es6语法解构 setup(props, {attrs, slots, emit})
- attrs: 获取当前组件标签上所有没有通过
props接收的属性的对象, 相当于this.$attrs - slots: 包含所有传入的插槽内容的对象, 相当于
this.$slots - emit: 用来分发自定义事件的函数, 相当于
this.$emit
