目錄
一、父傳子
1、props 屬性傳遞
2、方法傳遞
3、 $parent擷取方法和屬性
二、子傳父
1、 屬性傳遞
2 、通過$refs主動擷取子元件方法和屬性
3 、通過$children主動擷取子元件方法和屬性
三、兄弟間的通訊
1 、通過共同的父親進行傳遞資訊
2、全局事件總線—EventBus
3、 通過PubSub通訊
4 、通過Vuex通訊
元件之間傳值通訊分為三種: 父傳子、子傳父、兄弟元件之間的通訊;
前提
- 這裡我們使用了
vue/cli4
- 建立好項目之後我們需要這樣做
- 在
components
Parent.vue
ChildOne
- 然後在
App.vue
Parent.vue
- 在
基本結構如下
Parent.vue
<template>
<div>
<h1>Parent</h1>
<child-one></child-one>
</div>
</template>
<script>
import ChildOne from '@/components/ChildOne'
export default {
data () {
return {
}
},
components:{
ChildOne
}
}
</script>
ChildOne.vue
<template>
<div>
<h1>ChildOne</h1>
</div>
</template>
<script>
export default {
};
</script>
一、父傳子
1、props 屬性傳遞
父元件通過自定義屬性給子元件傳值，子元件用props接收
代碼如下
Parent.vue
//template
<div>
<h1>Parent</h1>
<child-one :msgToChild="msg"></child-one>
</div>
// script
data () {
return {
msg:'i am you father'
}
},
ChildOne.vue
//template
<div>
<h1>ChildOne</h1>
<div>接收到父親傳來的消息:{{msgToChild}}</div>
</div>
//script
export default {
//第一種寫法
// props:['msgToChild']
//第二種寫法
props: {
msgToChild: {
type: String,
}
}
};
2、方法傳遞
通過元件标簽進行方法的傳遞，子元件
$emit
觸發方法
父元件：
Parent.vue
//template
<!--進行方法的傳遞-->
<child-one :msgToChild="msg" @methodToChild="showMsg"></child-one>
//script
methods:{
/*定義方法*/
showMsg () {
alert('i am your father')
}
},
子元件：
ChildOne.vue
//tempalte
<div>接收到父親傳來的消息:{{msgToChild}}</div>
<!--定義一個按鈕用來觸發方法-->
<button @click="needFatherMethod">place click me</button>
//script
props:{
/*接收方法*/
methodToChild:{
type:Function
}
},
methods:{
/*觸發方法*/
needFatherMethod () {
this.$emit('methodToChild')
}
}
3、 $parent擷取方法和屬性
通過$parent來擷取父元件的執行個體，進而擷取父元件的屬性和方法
子元件：
ChildOne.vue
//template
<!--建立一個按鈕來觸發方法-->
<button @click="$parentMethod">place $parent</button>
/*定義後去父元件執行個體的方法*/
$parentMethod (){
console.log(this.$parent._data.msg)//i am you father
console.log(this.$parent.msg)//i am you father
this.$parent.showMsg()//調用方法
}
二、子傳父
1、 屬性傳遞
通過觸發父元件的方法進行傳遞資料
這等同于父 ===> 子 傳遞方法，方法的參數就是子元件的資料，emit的第二個參數就是父元件想要的資料
缺點
需要一定的觸發條件
不是響應式資料
一般觸發條件隻能在子元件，因為要得到的是子元件的資料(比如說在父函數定義一個方法通過這種方式來的到子元件資料，似乎比較困難。但是可以通過生命周期函數在子元件觸發來傳遞資料)
父元件：
Parent.vue
//template
<div>接收到子元件傳來的消息: {{childMsg}}</div>
<!--進行方法的傳遞-->
<child-one @getChildMsg="getChildMsg" :msgToChild="msg" @methodToChild="showMsg"></child-one>
//script
data () {
return {
childMsg:''
}
},
/*1.定義得到子元件資料的方法，觸發條件隻能在子元件
* 2.在data中定義一個屬性來儲存子元件傳遞過來的資料
* */
getChildMsg (childMsg){
this.childMsg = childMsg
},
子元件：
ChildOne.vue
//template
<!--定義向父元件資訊的觸發的條件-->
<button @click="setParentMsg">place send parent msg</button>
//script
data (){
return {
/*子元件資料*/
msg:'i am your child'
}
},
/*觸發父元件的方法，并傳遞參數*/
setParentMsg (){
this.$emit('getChildMsg',this.msg)
},
2 、通過 $refs
$refs
通過ref得到子元件的執行個體，進而得到子元件的方法和屬性
父元件：
Parent.vue
//template
<button @click="getMyChildMsgAndMethod">作為父親，我要主動拿到孩子的資訊</button>
<div>這是孩子的資訊： {{childMsg}}</div>
<!--通過ref得到子元件的執行個體-->
<child-one ref="myChild" @getChildMsg="getChildMsg" :msgToChild="msg" @methodToChild="showMsg"></child-one>
//script
data () {
return {
childMsg:''
}
},
/*得到子元件的方法和屬性*/
getMyChildMsgAndMethod (){
this.childMsg = this.$refs.myChild.msg
this.$refs.myChild.methodToParent()
},
子元件：
ChildOne.vue
//script
/*父親調用的方法*/
methodToParent (){
alert('i am you child')
},
3 、通過 $children
$children
通過
this.$children
得到的是一個子元件執行個體的數組
- 除此之外，他的用法幾乎和
$refs
父元件：
Parent.vue
//template
<button @click="$childrenMsg">$children得到孩子資訊</button>
<div>這是孩子的資訊： {{childMsg}}</div>
//script
$childrenMsg (){
/*this.$children得到是一個數組*/
const child = this.$children[0]
this.childMsg = child.msg
child.methodToParent()
},
三、兄弟間的通訊
1 、通過共同的父親進行傳遞資訊
父元件隻充當郵差的角色
- 他所利用的就是，父子和子父之間的通訊，兩者的結合
- 在
components
ChildTwo.vue
子元件：
ChildTwo.vue
//template
<template>
<div>
<h1>ChildTwo</h1>
<div>{{commonMsg}}</div>
</div>
</template>
//script
export default {
props:['common-msg'],
name: "ChildTwo",
}
子元件：
ChildOne.vue
//template
<!--向兄弟元件傳遞資料-->
<button @click="setBrotherMsg">place send brother msg</button>
//script
data (){
return {
/*定義資料*/
commonMsg:'i love you ,my brother'
}
},
props:{
//接收父親傳來的方法，主要用于拿到此元件的資料
poster:{
type:Function
},
},
/*調用方法傳遞資料*/
setBrotherMsg (){
this.$emit('poster',this.commonMsg)
},
父元件：
Parent.vue
//template
<!--進行方法的傳遞-->
<child-one @poster="poster" ref="myChild" @getChildMsg="getChildMsg" :msgToChild="msg" @methodToChild="showMsg"></child-one>
<!--傳遞資料-->
<child-two :common-msg="commonMsg"></child-two>
//script
data () {
return {
//定義儲存資料的變量
commonMsg:''
}
},
methods:{
/*定義拿到資料的方法*/
poster (commonMsg){
this.commonMsg = commonMsg
},
}
2、全局事件總線—EventBus
EventBus相當于全局的
$emit,$on
- 我們需要把它放到一個所有元件都能看得到的地方
//eventBus原理就是利用和emit 并執行個體化一個全局 vue 實作資料共享
//main.js
Vue.prototype.$bus=new Vue()
//傳值元件
this.$bus.$emit('eventTarget','值')
//接收元件
this.$bus.$on('eventTarget',value=> console.log(value))
3、 通過PubSub通訊
PubSub是一個包，專門用于元件之間的通訊
使用PubSub.subsribe()訂閱(注冊)事件
使用PubSub.publish()觸發事件
他與event-bus的使用差不多，隻是參數略有不同，綁定事件的第一個參數必須傳(請看下面的例題)
一般在React中用的較多
使用
- 下載下傳
npm install pubsub-js --save
2.在
ChildOne.vue
引入
兄弟元件：
ChildOne.vue
//template
<button @click="pubsubBrotherMsg">send brother msg by pubsub</button>
//script
import PubSub from 'pubsub-js'
methods: {
pubsubBrotherMsg (){
PubSub.subscribe('pubsubMsg',this.commonMsg)
},
}
2.在
ChildTwo.vue
引入
兄弟元件：
ChildTwo.vue
import PubSub from 'pubsub-js'
data(){
return {
pubsubMsg:''
}
},
mounted() {
/*msg:回調函數第一個參數，必須傳*/
PubSub.subscribe('pubsubMsg',(msg,data) => {
this.pubsubMsg = data
} )
}
4 、通過Vuex通訊
Vuex是一個集中式的狀态管理
詳情請看：
幾分鐘明白Vuex的五大屬性和使用方法
https://blog.csdn.net/m0_64346035/article/details/124618468
![JavaScript的那些坑之事件代理事件代理事件階段[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)