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

你可能感兴趣的文章
nio 中channel和buffer的基本使用
查看>>
NIO三大组件基础知识
查看>>
NIO与零拷贝和AIO
查看>>
NIO同步网络编程
查看>>
NIO基于UDP协议的网络编程
查看>>
NIO笔记---上
查看>>
NIO蔚来 面试——IP地址你了解多少?
查看>>
NISP一级,NISP二级报考说明,零基础入门到精通,收藏这篇就够了
查看>>
NISP国家信息安全水平考试,收藏这一篇就够了
查看>>
NIS服务器的配置过程
查看>>
NIS认证管理域中的用户
查看>>
Nitrux 3.8 发布!性能全面提升,带来非凡体验
查看>>
NiuShop开源商城系统 SQL注入漏洞复现
查看>>
NI笔试——大数加法
查看>>
NLog 自定义字段 写入 oracle
查看>>
NLog类库使用探索——详解配置
查看>>
NLP 基于kashgari和BERT实现中文命名实体识别(NER)
查看>>
NLP 模型中的偏差和公平性检测
查看>>
Vue3.0 性能提升主要是通过哪几方面体现的?
查看>>
NLP 项目:维基百科文章爬虫和分类【01】 - 语料库阅读器
查看>>