关于javascript:🚀快速掌握vue3新语法二-setup的参数propsemit

因为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人后必须由群成员拉入)

未完待续

更新动静请关注我的语雀