vue3父子組件傳值中props使用細節(jié)淺析
setup函數(shù)的參數(shù)
它主要有兩個參數(shù):
- 第一個參數(shù):props :父組件傳遞過來的屬性會被放到props對象中
- 第二個參數(shù):context:包含3個屬性
- attrs:所有的非prop的attribute
- slots:父組件傳遞過來的插槽(這個在以渲染函數(shù)返回時會有作用,后面會講到)
- emit:當我們組件內部需要發(fā)出事件時會用到emit
一、父組件要給子組件傳值時,可以通過props來完成組件的通信
// 父組件 <template> // 通過自定義屬性的方式給子組件傳遞數(shù)據(jù) <message title="父組件中的值"></message> </template> // 子組件 <template> // 使用父組件傳遞過來的值 <h2> {{title}} </h2> </template> <script> export default { // 通過props 接收父組件傳遞過來的數(shù)據(jù),模板中可以直接使用 props: ['title'], setup(props, context) { // setup函數(shù)中要使用的話,要接收一下 console.log(props.title) } </script>
子組件中props兩種常見的用法
方式一:字符串數(shù)組,數(shù)組中的字符串就是父組件中引用子組件時自定義attribute的名稱
方式二:對象類型,我們可以在指定attribute名稱的同時,指定它需要傳遞的類型,是否時必須的,默認值等
細節(jié)一:props中屬性可以指定的類型
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
細節(jié)二:props中不同類型的寫法
props: { // 基礎類型指定 propA: Number, // 指定多個類型 propB: [String, Number], // 指定必傳類型 propC: { type: String, required: true }, // 帶有默認值的數(shù)字 propD: { type: Number, default: 100 }, // 帶有默認值的對象 propE: { type: Object, // 對象或數(shù)組默認值必須從一個工廠函數(shù)獲取 default() { return { mes: 'lihua'} } }, // 自定義驗證函數(shù) propF: { validator(value) { return ['warning', 'success'].includes(value) } }, // 具有默認值的函數(shù) prorG: { type: Function, default() { return 'default function' } } }
細節(jié)三:Props的大小寫命名
屬性命名不推薦駝峰命名法法,需要用 a-b(短橫線分隔命名)
二、子組件給父組件傳值
父組件
//父組件 <template> // 給子組件傳遞自定義函數(shù) <message @add="addNum"></message> </template> <script> export default { components: { message } setup() { const addNum = (value) => { // 接收子組件傳遞過來的值 console.log(value) } // 導出方法提供給模板使用 return { addNum } } </script>
子組件
//子組件 <template> // 使用父組件傳遞過來的值 <button @click="increment"></button> </template> <script> export default { // 1. 通過第二個參數(shù) context 接收父組件傳遞過來的方法 setup(props, context) { const increment = () => { // 通過 context.emit觸發(fā)父組件的方法,第二個參數(shù)為傳遞的參數(shù),可以傳遞多個 context.emit('add', 100) context.emit('add', 100, 'aaa', 'bbb') } // 導出方法提供給模板使用 return { increment } } // 2. 通過第二個參數(shù) 解構 emits 接收父組件傳遞過來的函數(shù) setup(props, { emit }) { const increment = () => { // 通過emit觸發(fā)父組件的方法,第二個參數(shù)為傳遞的參數(shù),可以傳遞多個 emit('add', 100) emit('add', 100, 'aaa', 'bbb') } return { increment } } } </script>
總結
到此這篇關于vue3父子組件傳值中props使用細節(jié)的文章就介紹到這了,更多相關vue3父子組件傳值內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Vue整合Node.js直連Mysql數(shù)據(jù)庫進行CURD操作過程詳解
這篇文章主要給大家分享Vue整合Node.js,直連Mysql數(shù)據(jù)庫進行CURD操作的詳細過程,文中有詳細的代碼講解,具有一定的參考價值,需要的朋友可以參考下2023-07-07vant-list組件觸發(fā)多次onload事件導致數(shù)據(jù)亂序的解決方案
這篇文章主要介紹了vant-list組件觸發(fā)多次onload事件導致數(shù)據(jù)亂序的解決方案2023-01-01vue2使用wangeditor實現(xiàn)數(shù)學公式和富文本編輯器
這篇文章主要為大家詳細介紹了vue2如何使用wangeditor實現(xiàn)數(shù)學公式和富文本編輯器功能,文中的示例代碼講解詳細,感興趣的小伙伴可以了解一下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實現(xiàn)數(shù)據(jù)篩選與搜索功能的示例代碼
在許多Web應用程序中,數(shù)據(jù)篩選和搜索是關鍵的用戶體驗功能,本文將深入探討在Vue中如何進行數(shù)據(jù)篩選與搜索的實現(xiàn),感興趣的小伙伴可以跟隨小編一起學習一下2023-10-10