vue3中defineEmits与defineProps的用法实例
作者：cocoonne
这篇文章主要介绍了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)
}
到此这篇关于vue3中defineEmits/defineProps的用法的文章就介绍到这了,更多相关defineEmits/defineProps的用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！