vue3父子組件傳值中props使用細(xì)節(jié)淺析
setup函數(shù)的參數(shù)
它主要有兩個(gè)參數(shù):
- 第一個(gè)參數(shù):props :父組件傳遞過(guò)來(lái)的屬性會(huì)被放到props對(duì)象中
- 第二個(gè)參數(shù):context:包含3個(gè)屬性
- attrs:所有的非prop的attribute
- slots:父組件傳遞過(guò)來(lái)的插槽(這個(gè)在以渲染函數(shù)返回時(shí)會(huì)有作用,后面會(huì)講到)
- emit:當(dāng)我們組件內(nèi)部需要發(fā)出事件時(shí)會(huì)用到emit
一、父組件要給子組件傳值時(shí),可以通過(guò)props來(lái)完成組件的通信
// 父組件 <template> // 通過(guò)自定義屬性的方式給子組件傳遞數(shù)據(jù) <message title="父組件中的值"></message> </template> // 子組件 <template> // 使用父組件傳遞過(guò)來(lái)的值 <h2> {{title}} </h2> </template> <script> export default { // 通過(guò)props 接收父組件傳遞過(guò)來(lái)的數(shù)據(jù),模板中可以直接使用 props: ['title'], setup(props, context) { // setup函數(shù)中要使用的話,要接收一下 console.log(props.title) } </script>
子組件中props兩種常見的用法
方式一:字符串?dāng)?shù)組,數(shù)組中的字符串就是父組件中引用子組件時(shí)自定義attribute的名稱
方式二:對(duì)象類型,我們可以在指定attribute名稱的同時(shí),指定它需要傳遞的類型,是否時(shí)必須的,默認(rèn)值等
細(xì)節(jié)一:props中屬性可以指定的類型
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
細(xì)節(jié)二:props中不同類型的寫法
props: { // 基礎(chǔ)類型指定 propA: Number, // 指定多個(gè)類型 propB: [String, Number], // 指定必傳類型 propC: { type: String, required: true }, // 帶有默認(rèn)值的數(shù)字 propD: { type: Number, default: 100 }, // 帶有默認(rèn)值的對(duì)象 propE: { type: Object, // 對(duì)象或數(shù)組默認(rèn)值必須從一個(gè)工廠函數(shù)獲取 default() { return { mes: 'lihua'} } }, // 自定義驗(yàn)證函數(shù) propF: { validator(value) { return ['warning', 'success'].includes(value) } }, // 具有默認(rèn)值的函數(shù) prorG: { type: Function, default() { return 'default function' } } }
細(xì)節(jié)三:Props的大小寫命名
屬性命名不推薦駝峰命名法法,需要用 a-b(短橫線分隔命名)
二、子組件給父組件傳值
父組件
//父組件 <template> // 給子組件傳遞自定義函數(shù) <message @add="addNum"></message> </template> <script> export default { components: { message } setup() { const addNum = (value) => { // 接收子組件傳遞過(guò)來(lái)的值 console.log(value) } // 導(dǎo)出方法提供給模板使用 return { addNum } } </script>
子組件
//子組件 <template> // 使用父組件傳遞過(guò)來(lái)的值 <button @click="increment"></button> </template> <script> export default { // 1. 通過(guò)第二個(gè)參數(shù) context 接收父組件傳遞過(guò)來(lái)的方法 setup(props, context) { const increment = () => { // 通過(guò) context.emit觸發(fā)父組件的方法,第二個(gè)參數(shù)為傳遞的參數(shù),可以傳遞多個(gè) context.emit('add', 100) context.emit('add', 100, 'aaa', 'bbb') } // 導(dǎo)出方法提供給模板使用 return { increment } } // 2. 通過(guò)第二個(gè)參數(shù) 解構(gòu) emits 接收父組件傳遞過(guò)來(lái)的函數(shù) setup(props, { emit }) { const increment = () => { // 通過(guò)emit觸發(fā)父組件的方法,第二個(gè)參數(shù)為傳遞的參數(shù),可以傳遞多個(gè) emit('add', 100) emit('add', 100, 'aaa', 'bbb') } return { increment } } } </script>
總結(jié)
到此這篇關(guān)于vue3父子組件傳值中props使用細(xì)節(jié)的文章就介紹到這了,更多相關(guān)vue3父子組件傳值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue中用JSON實(shí)現(xiàn)刷新界面不影響倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了Vue中用JSON實(shí)現(xiàn)刷新界面不影響倒計(jì)時(shí),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-10-10Vue整合Node.js直連Mysql數(shù)據(jù)庫(kù)進(jìn)行CURD操作過(guò)程詳解
這篇文章主要給大家分享Vue整合Node.js,直連Mysql數(shù)據(jù)庫(kù)進(jìn)行CURD操作的詳細(xì)過(guò)程,文中有詳細(xì)的代碼講解,具有一定的參考價(jià)值,需要的朋友可以參考下2023-07-07vant-list組件觸發(fā)多次onload事件導(dǎo)致數(shù)據(jù)亂序的解決方案
這篇文章主要介紹了vant-list組件觸發(fā)多次onload事件導(dǎo)致數(shù)據(jù)亂序的解決方案2023-01-01vue項(xiàng)目使用electron進(jìn)行打包操作的全過(guò)程
我們都知道Electron項(xiàng)目分為了主進(jìn)程和渲染進(jìn)程,主進(jìn)程其實(shí)就是我們的Electron,渲染進(jìn)程就相當(dāng)于我們的Vue項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目使用electron進(jìn)行打包操作的全過(guò)程,需要的朋友可以參考下2023-03-03vue2使用wangeditor實(shí)現(xiàn)數(shù)學(xué)公式和富文本編輯器
這篇文章主要為大家詳細(xì)介紹了vue2如何使用wangeditor實(shí)現(xiàn)數(shù)學(xué)公式和富文本編輯器功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2023-12-12淺析Vue.js中v-bind v-model的使用和區(qū)別
v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定,所謂雙向綁定。這篇文章主要介紹了Vue.js中v-bind v-model的使用和區(qū)別,需要的朋友可以參考下2018-12-12vue 動(dòng)態(tài)修改a標(biāo)簽的樣式的方法
這篇文章主要介紹了vue 動(dòng)態(tài)修改a標(biāo)簽的樣式的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01Vue實(shí)現(xiàn)數(shù)據(jù)篩選與搜索功能的示例代碼
在許多Web應(yīng)用程序中,數(shù)據(jù)篩選和搜索是關(guān)鍵的用戶體驗(yàn)功能,本文將深入探討在Vue中如何進(jìn)行數(shù)據(jù)篩選與搜索的實(shí)現(xiàn),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10