博客
关于我
Vue3 学习笔记 —— setup
阅读量:244 次
发布时间:2019-03-01

本文共 698 字,大约阅读时间需要 2 分钟。

setup

  • 新的 option,仅在beforeCreate之前执行一次
// setup 执行时,组件还没有开始创建,因此 this 为 undefined  setup () {       console.log('this in setup:', this)  }

在这里插入图片描述

  • 如果该函数返回对象,对象中的属性或方法,在模板中可以直接使用

在这里插入图片描述

  • setup 中返回的对象会同datamethods合并到组件对象上
export default defineComponent({     name: 'App',  setup () {       return {         inSetup: 'setup',    }  },  data() {       return {         inData: 10    }  },  methods: {       inMethods () {         console.log(123)    }  },  mounted () {       console.log(this)  }});

在这里插入图片描述

  • setup 接收两个参数 propscontext
  • props:组件声明接收,且父组件传递了的属性
  • context: 包含 attrs: 父组件传递的但未声明接收的属性、emit:用来触发自定义事件、slots: 父组件传递的插槽组件
    在这里插入图片描述
// App.vue
// Child.vue

在这里插入图片描述

转载地址:http://mpqt.baihongyu.com/

你可能感兴趣的文章
Net与Flex入门
查看>>
Net任意String格式转换为DateTime类型
查看>>
net包之IPConn
查看>>
net发布的dll方法和类显示注释信息(字段说明信息)[图解]
查看>>
Net和T-sql中的日期函数操作
查看>>
Net处理html页面元素工具类(HtmlAgilityPack.dll)的使用
查看>>
Net操作Excel(终极方法NPOI)
查看>>
Net操作配置文件(Web.config|App.config)通用类
查看>>
net网络查看其参数state_dict,data,named_parameters
查看>>
Net连接mysql的公共Helper类MySqlHelper.cs带MySql.Data.dll下载
查看>>
NeurIPS(神经信息处理系统大会)-ChatGPT4o作答
查看>>
neuroph轻量级神经网络框架
查看>>
Neutron系列 : Neutron OVS OpenFlow 流表 和 L2 Population(7)
查看>>
new Blob()实现不同类型的文件下载功能
查看>>
New Concept English three (35)
查看>>
NEW DATE()之参数传递
查看>>
New Journey--工作五年所思所感小记
查看>>
new Queue(REGISTER_DELAY_QUEUE, true, false, false, params)
查看>>
New Relic——手机应用app开发达人的福利立即就到啦!
查看>>
new work
查看>>