0
点赞
收藏
分享

微信扫一扫

一 MySQL、SQL Server、Oracle三者的区别

搬砖的小木匠 2024-05-13 阅读 5
前端

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) {...}            //只用props
  setup(props, { attrs, slots, emit, expose }) {...} //context参数解构
  props不能用es6解构,会消除 prop 的响应性,解构需要借助 toRefs 或 toRef。
举报

相关推荐

0 条评论