最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

微动态丨vue3的setup函数的使用

来源：博客园


(资料图片仅供参考)

setup的使用：1.setup 函数时，它将接受两个参数：（props、context(包含attrs、slots、emit)）

context包含三个参数，可通过解构方式写context该上下文对象是非响应式的，可以安全地解构： export default {  setup(props, { attrs, slots, emit, expose }) {    // Attribute（非响应式的对象，等价于 $attrs）    console.log(attrs)     // 插槽（非响应式的对象，等价于 $slots）    console.log(slots)     // 触发事件（函数，等价于 $emit）    console.log(emit)     // 暴露公共 property（函数）    console.log(expose)  }}

2.setup函数执行时机是在beforeCreated和created两个周期函数之前3.setup里面没有vue实例，故想通过this访问会是undefined，即第一张图提示文字所述4.setup函数中所定义的所有变量和方法，谨记要return出去，否则在vue文件（模板）中无法使用5.在渲染函数中可以直接使用在同一作用域下声明的响应式状态：

import { h, ref } from "vue" export default {  setup() {    const count = ref(0)    return () => h("div", count.value)  }}

6.子组件组件内部的方法想暴露给父组件通过ref方式去获取使用，通过expose方法即可

import {  ref } from "vue" export default {  setup(props, { expose }) {    const num= ref(0)    const count = ref(0)    const increment = () => ++count.value    expose({      count,      increment    })  }}父组件： 调用：   this.$refs.childCom.increment  // 成功，可以获取到对应方法调用：   this.$refs.childCom.count      // 成功，可以获取到对应值调用：   this.$refs.childCom.num        // 失败，不可以获取到对应值expose未导出的属性，父组件中调用就会是undefined，未暴露的属性父方法是拿不到的

关键词： 无法使用 周期函数 触发事件