vue3 defineEmits/defineProps的用法

vue3 setup语法糖中的defineEmits/defineProps的用法

这两个 api 都是在 setup 语法糖里面使用的，并且不需要引入

defineProps：父组件给子组件传递参数

defineEmits：在子组件中调用父组件的回调函数，并且可传参

https://cn.vuejs.org/api/sfc-script-setup.html#defineprops-defineemits

defineEmits

父组件绑定在子组件中绑定自定义事件，子组件可用 emits 执行

• 父组件绑定事件：@increase="handleIncrease"

• 父组件回调函数：const handleIncrease = (num: number) => {}

• 子组件定义 emit：

// ts 专有
const emits= defineEmits<{
    (e: 'increase', num: number): void
}>()

// js
let emits = defineEmits(['startChange', 'endChange'])

• 子组件调用 emit

emits('increase', 1);

父组件

<template>
  <section class="parent">
    <childVue :num="nums" @increase="handleIncrease"></childVue>
  </section>
</template>

<script setup>
  import childVue from './child.vue';
  import { ref } from 'vue';
  const nums = ref(0);
    
  // 回调函数
  const handleIncrease = (num: number) => {
    nums.value += num;
  };
</script>

子组件

<template>
  <section class="box" @click="handelClick">{{ num }}</section>
</template>

<script setup>
// ts 专有
const emits= defineEmits<{
    (e: 'increase', num: number): void
}>()
            
const handelClick = () => {
    emits('increase', 1);
};
</script>

defineProps

父组件可直接向子组件传值（只读）

父组件

<template>
    <div class="Father">
        <p>我是父组件</p>
        <!--  -->
        <son :ftext="ftext"></son>
    </div>
</template>
    
<script setup>
import {ref} from 'vue'
import Son from './son.vue'
const ftext = ref('我是父组件-text')
</script>

子组件

<template>
    <div class="Son">
        <p>我是子组件</p>
       <!-- 展示来自父组件的值 在这里直接使用-->
       <p>接收到的值：{{ftext}}</p>
    </div>
</template>
    
<script setup>
import {ref} from 'vue'
// se

//defineProps 来接收组件的传值
const props = defineProps<{
    ftext: string,
}>()

// 复杂写法
const props = defineProps<{
    ftext: {
        type: string,
        required: false,
        default: 'hhh'
    }
}>()


// 在这里就用 props.sideCollapse
</script>

props 双向绑定

当我们想把父组件传过来的参数变成双向绑定时，即可读也可写

• v-model:sideCollapse="sideCollapse"
• 相当于多绑定了一个自定义事件 update:sideCollapse
• emits('update:sideCollapse', 要变成的值)

父组件

<script setup lang="ts">
import { ref } from 'vue'

let sideCollapse = ref(false)
</script>

<template>
    <nav-header v-model:sideCollapse="sideCollapse"></nav-header>
</template>

子组件

const props = defineProps<{
    sideCollapse: boolean,
}>()

// let emits = defineEmits(['update:sideCollapse'])  js写法

// ts写法
const emits = defineEmits<{
    (e: 'update:sideCollapse', sideCollapse: boolean): void
}>()


function toggle() {
    // props.sideCollapse = !props.sideCollapse  不能直接修改！
    
    // 要这样修改
    emits('update:sideCollapse', !props.sideCollapse)
}