🚀Quickly master the new syntax of vue3 (2)-setup parameters (props/emit)

Because the analysis of setup is before other component options, "this" in setup is not a component instance. The properties previously obtained through "this" must now be obtained from setup parameters, such as "props/emit".

props

The first parameter of setup is 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

The second parameter of setup is an object, including "attrs/slots/emit/expose", which contains 4 attributes, but here we only talk about emit, and the other 3 are not commonly used in business code development. The starting point of this lesson is To help you get started quickly, so you can learn about their content on their own official website for the time being, and after this series of courses are completed, I will also publish an advanced tutorial for everyone.

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

Above we have implemented "v-model" in setup mode.

WeChat group

Thank you for reading. If you have any questions, you can add me to WeChat. I will pull you into the WeChat group (Because Tencent has a limit of 100 people for WeChat groups, after more than 100 people must be pulled in by group members)

To be continued

updates, please pay attention to my language bird