vue3中defineEmits與defineProps的用法實例
更新時間：2023年12月10日 08:53:34 作者：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 執(zhí)行
父組件綁定事件：
@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的用法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
今天小編就為大家分享一篇Vue封裝的可編輯表格插件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue?watch監(jiān)聽觸發(fā)優(yōu)化搜索框的性能防抖節(jié)流的比較
這篇文章主要為大家介紹了vue?watch監(jiān)聽觸發(fā)優(yōu)化搜索框的性能防抖節(jié)流的比較,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
本文給大家介紹Vue3中setup()函數中聲明變量的幾種方法,希望本文能夠幫助你更好地理解Vue3的開發(fā)方式,感興趣的朋友跟隨小編一起看看吧2023-11-11
這篇文章主要介紹了vue部署后靜態(tài)文件加載404的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細介紹了Vue3中useLocalStorage用法的相關知識,文中的示例代碼講解詳細,具有一定的學習價值,感興趣的小伙伴可以了解一下2023-10-10
html2canvas.js是一款可以在網頁上實現(xiàn)頁面截圖的js,它使用了html5和css3的一些新功能特性,實現(xiàn)了在客戶端對網頁進行截圖的功能,這篇文章主要給大家介紹了關于html2canvas使用的相關資料,需要的朋友可以參考下2024-03-03
Vue2打包部署后可動態(tài)修改后端接口地址的解決方法
本篇文章將介紹使用Vue2開發(fā)前后端分離項目時,前端打包部署后可動態(tài)修改后端接口地址的解決方法,文中通過圖文結合的方式介紹的非常詳細,需要的朋友可以參考下2024-07-07
在本篇文章里小編給大家分享了關于VUE前后端學習tab寫法實例以及相關知識點，需要的朋友們參考下。2019-08-08
vue中封裝axios并實現(xiàn)api接口的統(tǒng)一管理
這篇文章主要介紹了vue中封裝axios并實現(xiàn)api接口的統(tǒng)一管理的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
在現(xiàn)代的前端開發(fā)中,我們經常需要使用一些第三方的外部腳本或庫,尤其是像地圖、圖表、分析工具等,在 Vue 項目中,有多種方式可以引入外部腳本,本文將詳細介紹在 Vue 項目中引入外部腳本的幾種常見方法,需要的朋友可以參考下2025-01-01