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

你可能感兴趣的文章
Vue踩坑笔记 - 关于vue静态资源引入的问题
查看>>
Netty工作笔记0024---SelectionKey API
查看>>
Netty工作笔记0025---SocketChannel API
查看>>
Netty工作笔记0027---NIO 网络编程应用--群聊系统2--服务器编写2
查看>>
Netty工作笔记0034---Netty架构设计--线程模型
查看>>
Netty工作笔记0050---Netty核心模块1
查看>>
Netty工作笔记0057---Netty群聊系统服务端
查看>>
Netty工作笔记0060---Tcp长连接和短连接_Http长连接和短连接_UDP长连接和短连接
查看>>
Netty工作笔记0063---WebSocket长连接开发2
查看>>
Netty工作笔记0070---Protobuf使用案例Codec使用
查看>>
Netty工作笔记0072---Protobuf内容小结
查看>>
Netty工作笔记0077---handler链调用机制实例4
查看>>
Netty工作笔记0081---编解码器和处理器链梳理
查看>>
Netty工作笔记0084---通过自定义协议解决粘包拆包问题2
查看>>
Netty工作笔记0085---TCP粘包拆包内容梳理
查看>>
Netty常用组件一
查看>>
Netty常见组件二
查看>>
netty底层源码探究:启动流程;EventLoop中的selector、线程、任务队列;监听处理accept、read事件流程;
查看>>
Netty心跳检测
查看>>
Netty心跳检测机制
查看>>