您好,登錄后才能下訂單哦!
這篇文章主要講解了“Vue中父子組件間通信的方法是什么”,文中的講解內容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“Vue中父子組件間通信的方法是什么”吧!
父組件傳遞給子組件:通過props屬性;
子組件傳遞給父組件:通過$emit觸發(fā)事件;
?
這里我們知道,父組件有一些數(shù)據(jù)需要子組件來進行展示,那我們可以通過props
來完成組件之間的通信
通過props來完成組件之間的通信
那么什么是Props
呢?
作用:接受父組件傳遞過來的屬性
Props
是你可以在組件上注冊一些自定義的attribute(屬性);
父組件給這些attribute(屬性)賦值,子組件通過attribute的名稱獲取到對應的值;
在使用 script setup
的單文件組件中,props
可以使用 defineProps()
宏來聲明:
<script setup> const props = defineProps(['foo']) console.log(props.foo) </script>
1)數(shù)組類型
在沒有使用 script setup
的組件中,prop
可以使用 props
選項來聲明:
export default { props: ['foo'], setup(props) { // setup() 接收 props 作為第一個參數(shù) console.log(props.foo) } }
例子,對象語法的使用
App.vue
里面使用組件,屬性整數(shù)props所定義的
<template> <show-info name="kk" age="18" height="1.7" /> </template>
showInfo.vue
子組件
export default { props:{ name :{ type:String, default:"我是默認值name" }, height:{ type:Number, default:2 } } }
另外:
那么type的類型都可以是哪些呢?
String
Number
Boolean
Array
Object
Date
Function
Symbol
2)對象類型
用對象
的形式聲明props
(這個還挺常用的)
使用 script setup
defineProps({ title: String, likes: Number })
非 script setup
export default { props: { title: String, likes: Number } }
子組件傳遞給父組件通過$emit觸發(fā)事件
?
子組件傳遞內容到父組件:
當子組件有一些事件發(fā)生的時候,比如在組件中發(fā)生了點擊,父組件需要切換內容;
子組件有一些內容想要傳遞給父組件的時候;
$emit(“add”, count)
第一個參數(shù)自定義的事件名稱,第二個參數(shù)是傳遞的參數(shù)
舉一個計數(shù)器案例
這里我們有兩個子組件,一個父組件
子組件中定義好在某些情況下觸發(fā)的事件名稱
在父組件中以v-on(語法糖@)的方式傳入要監(jiān)聽的事件名稱,并且綁定到對應的方法中;
最后,在子組件中發(fā)生某個事件的時候,根據(jù)事件名稱觸發(fā)對應的事件
1)父組件App.vue
父組件監(jiān)聽子組件加或減的事件,通過子組件發(fā)生事件給父組件監(jiān)聽
父組件監(jiān)聽子組件發(fā)出的自定義事件,然后執(zhí)行相應的操作
<template> <div class="app"> <h3>當前計數(shù):{{counter}}</h3> <!-- 1.自定義add-counter 并且監(jiān)聽內部的add事件 --> <add-counter @add="addBtnClick"></add-counter> <!-- 2.自定義su-counter組件,監(jiān)聽內部的sub事件 --> <sub-counter @sub="subBtnClick"></sub-counter> </div> </template> <script> import AddCounter from './AddCounter.vue' import SubCounter from './SubCounter.vue' export default { components: { AddCounter, SubCounter }, data() { return { counter:0 } }, methods:{ addBtnClick(count) { this.counter += count }, subBtnClick(count) { this.counter -= count } } } </script>
2)子組件1AddCounter.vue
這里定義的是計數(shù)器的加操作
子組件事件觸發(fā)之后,通過this.$emit的方式進行發(fā)出事件
<template> <div class="add"> <button @click="btnClick(1)">+1</button> <button @click="btnClick(5)">+5</button> <button @click="btnClick(10)">+10</button> </div> </template> <script> export default { methods:{ btnClick(count) { // 讓子組件發(fā)出去一個自定義事件 // 第一個參數(shù)自定義的事件名稱,第二個參數(shù)是傳遞的參數(shù) this.$emit("add",count) } } } </script>
3)子組件2SubCounter.vue
這里定義的是計數(shù)器的減操作
子組件事件觸發(fā)之后,通過this.$emit
的方式進行發(fā)出事件
<template> <div class="sub"> <button @click="btnClick(1)">-1</button> <button @click="btnClick(5)">-5</button> <button @click="btnClick(10)">-10</button> </div> </template> <script> export default { // 1.emits數(shù)組語法 emits:["addd"], methods:{ btnClick(count) { this.$emit("sub",count) } } } </script>
Vue具體輕量級框架、簡單易學、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結構的分離、虛擬DOM、運行速度快等優(yōu)勢,Vue中頁面使用的是局部刷新,不用每次跳轉頁面都要請求所有數(shù)據(jù)和dom,可以大大提升訪問速度和用戶體驗。
感謝各位的閱讀,以上就是“Vue中父子組件間通信的方法是什么”的內容了,經過本文的學習后,相信大家對Vue中父子組件間通信的方法是什么這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關知識點的文章,歡迎關注!
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經查實,將立刻刪除涉嫌侵權內容。