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

因为setup的解析在其他组件选项之前, 所以setup中"this"并不是组件实例, 之前通过"this"获取的属性现在都要从setup的参数中获取, 比如"props/emit".

props

setup的第一个参数是props.

<!--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个在业务代码开发中并不常用, 本课的出发点是帮助大家快速上手开发, 所以关于他们的内容大家暂时可以自行官网了解, 再本系列课程完毕后,我也会出一版进阶的教程提供给大家.

<!--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>

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

微信群

感谢大家的阅读, 如有疑问可以加我微信, 我拉你进入微信群(由于腾讯对微信群的100人限制, 超过100人后必须由群成员拉入)

未完待续

更新动态请关注我的语雀