博客
关于我
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/

你可能感兴趣的文章
MySQL分组查询
查看>>
Mysql分表后同结构不同名称表之间复制数据以及Update语句只更新日期加减不更改时间
查看>>
mySql分页Iimit优化
查看>>
MySQL分页查询
查看>>
mysql列转行函数是什么
查看>>
mysql创建函数报错_mysql在创建存储函数时报错
查看>>
mysql创建数据库和用户 并授权
查看>>
mysql创建数据库指定字符集
查看>>
MySql创建数据表
查看>>
MySQL创建新用户以及ERROR 1396 (HY000)问题解决
查看>>
MySQL创建用户报错:ERROR 1396 (HY000): Operation CREATE USER failed for 'slave'@'%'
查看>>
mysql加强(3)~分组(统计)查询
查看>>
mysql加强(4)~多表查询:笛卡尔积、消除笛卡尔积操作(等值、非等值连接),内连接(隐式连接、显示连接)、外连接、自连接
查看>>
mysql加强(5)~DML 增删改操作和 DQL 查询操作
查看>>
mysql加强(6)~子查询简单介绍、子查询分类
查看>>
mysql加强(7)~事务、事务并发、解决事务并发的方法
查看>>
mysql千万级大数据SQL查询优化
查看>>
MySQL千万级大表优化策略
查看>>
MySQL单实例或多实例启动脚本
查看>>
MySQL压缩包方式安装,傻瓜式教学
查看>>