🚀快速掌握vue3新语法(二) - setup的参数(props/emit)

2021年11月22日 阅读数:21
这篇文章主要向大家介绍🚀快速掌握vue3新语法(二) - setup的参数(props/emit),主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

由于setup的解析在其余组件选项以前, 因此setup中"this"并非组件实例, 以前经过"this"获取的属性如今都要从setup的参数中获取, 好比"props/emit".html

props

setup的第一个参数是props.vue

<!--App.vue-->
<Test :number="100"/>
<!--Test.vue-->
<template>
  <p>{{number}} </p>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: 'Test',
  
  props:{
      number:{
        type:Number
    }
  },

  setup(props){
       console.log(props.value); // 100
  }
});

emit

setup的第二个参数是个对象, 包含"attrs/slots/emit/expose", 这里包含4个属性, 可是这里咱们只讲emit, 其余3个在业务代码开发中并不经常使用, 本课的出发点是帮助你们快速上手开发, 因此关于他们的内容你们暂时能够自行官网了解, 再本系列课程完毕后,我也会出一版进阶的教程提供给你们.segmentfault

<!--Child.vue, 子组件-->
<template>
  <p>{{number}} </p>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: 'Child',
  
  props:{
      number:{
        type:Number,
    }
  },

  setup(props,{emit}){
    // 模拟接口请求
    setTimeout(()=>{
        emit('update:number',props.number+100);
    })
  }
});
<!--Parent.vue, 父组件-->
<template>
  <Child v-model:number="n"/>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Child from './SetupParams/Child.vue'
export default defineComponent({
  name: "Parent",

  components:{Child},

  data(){
    return {n:99};
  },
});
</script>

1.gif

上面咱们实现了setup模式下的"v-model".微信

微信群

感谢你们的阅读, 若有疑问能够加我微信, 我拉你进入微信群(因为腾讯对微信群的100人限制, 超过100人后必须由群成员拉入)this

未完待续

更新动态请关注个人语雀spa