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

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

 更新時間:2022年03月15日 10:57:09   作者:前端.攻城獅  
這篇文章主要給大家介紹了關于vue3父子組件傳值中props使用細節(jié)的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

setup函數(shù)的參數(shù)

它主要有兩個參數(shù):

  • 第一個參數(shù):props :父組件傳遞過來的屬性會被放到props對象中
  • 第二個參數(shù):context:包含3個屬性
  1. attrs:所有的非prop的attribute
  2. slots:父組件傳遞過來的插槽(這個在以渲染函數(shù)返回時會有作用,后面會講到)
  3. 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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

最新評論