欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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è)屬性
  1. attrs:所有的非prop的attribute
  2. slots:父組件傳遞過(guò)來(lái)的插槽(這個(gè)在以渲染函數(shù)返回時(shí)會(huì)有作用,后面會(huì)講到)
  3. 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)文章

最新評(píng)論