快捷導(dǎo)航

vue3父子組件傳值中props使用細(xì)節(jié)淺析

更新時(shí)間：2022年03月15日 10:57:09 作者：前端.攻城獅

這篇文章主要給大家介紹了關(guān)于vue3父子組件傳值中props使用細(xì)節(jié)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(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>