Vue3的setup
setup选项是一个接收props和context的函数是一个新的组件选项,作为Composition-API的入口点,只会被执行一次,用于建立数据与逻辑的连接。
注意点
在执行setup函数时,还没执行created生命周期方法,因此在setup函数中,无法使用data和methods的变量和方法。
不能在setup函数中使用data和methods,在setup中使用this是无法操作的,因为setup 在生命周期beforeCreate和created之间执行,调用发生在 data property、computed property 或 methods 被解析之前,此时组件实例未实例化成功,所以data,methods等东西无法在 setup 中使用this被获取。
{setup(props,context){context.attrs;context.slots;context.emit;context.listeners;context.root;context.parent;context.refs;return {};}
}
setup方法的返回值会合并到模板的上下文中参与数据的渲染。
setup函数的参数
setup(props,context)函数有两个参数,props:组件接收的参数;context:是一个对象,包含attrs、slots、emit、expose这些属性。
attrs:Attribute,非响应式对象,等同于$attrs
slots:插槽,非响应式对象,等同于$slots
emit:触发事件,方法,等同于$emit,主要用来向父组件通信传参
expose:暴露公共property,函数
setup(props,context) { //完整写法console.log(props.title) //获取传递过来的title属性... } setup(props) {...} //只用propssetup(props, { attrs, slots, emit, expose }) {...} //context参数解构props不能用es6解构,会消除 prop 的响应性,解构需要借助 toRefs 或 toRef。