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)
}