vue項(xiàng)目中的組件傳值方式
vue項(xiàng)目中組件傳值
父子通信
父組件parent.vue
<template>
? ? <div id="parentBig">
? ? ? ? <Child :dmsg="msg"></Child>
? ? </div>
</template>
<script>
import child from '@/components/child'
export default {
? ? data(){
? ? ? ? return {
? ? ? ? ? ? msg:'要傳遞的信息'
? ? ? ? }
? ? },
? ? components:{
? ? ? ? Child
? ? }
}
</script>子組件child.vue
<template>
? ? <div id="childBig">
? ? ? ? <h1>{{dmsg}}</h1>
? ? </div>
</template>
<script>
export default {
? ? props: ['dmsg'],// 使用props接收
? ? data(){
? ? ? ? return {
? ? ? ? }
? ? },
}
</script>子父通信
子組件child.vue
<template>
? ? <div id="childBig">
? ? ? ? <button @click="click1">點(diǎn)擊</button>
? ? </div>
</template>
<script>
export default {
? ? data(){
? ? ? ? return { }
? ? },
? ? methods:{
? ? ? ? click1(){
? ? ? ? ? ? // 添加自定義事件
? ? ? ? ? ? // 參數(shù)1：自定義事件名(string形式)
? ? ? ? ? ? // 參數(shù)2：需要傳遞的值
? ? ? ? ? ? this.$emit('Dream', 'aaa')
? ? ? ? }
? ? }
}
</script>父組件parent.vue
<template>
? ? <div id="parentBig">
? ? ? ? <h1>{{title}}</h1>
? ? ? ? <child @Dream="fn"></child>
? ? ? ? <!-- @自定義事件名="調(diào)用的函數(shù)" -->
? ? </div>
</template>
<script>
import child from '@/components/child'
export default {
? ? data(){
? ? ? ? return {
? ? ? ? ? ? title:'文字ing'
? ? ? ? }
? ? },
? ? methods:{
? ? ? ? fn(res){
? ? ? ? ? ? console.log('接收自定義事件傳的參數(shù)',res)
? ? ? ? ? ? this.title = '已更改為傳來(lái)的參數(shù)：'+res
? ? ? ? }
? ? },
? ? components:{
? ? ? ? child
? ? }
}
</script>vue非父子組件傳值
非父子組件傳值
（1）事件總線
（2）$attrs / listeners
事件總線
事件總線的原理就是：
創(chuàng)建一個(gè)公共的Js文件，讓其專門(mén)負(fù)責(zé)傳值。就像公共的交通工具bus，data可以乘坐這輛bus到達(dá)指定的站臺(tái)（相應(yīng)的組件）
那么首先要做的就是在我們的項(xiàng)目中創(chuàng)造這輛bus
1.閉門(mén)造車(chē)（創(chuàng)建公用JS文件）
首先得在城市中（src目錄下）租塊地（創(chuàng)建一個(gè)文件夾），放置這輛bus。
bus.js的創(chuàng)建十分簡(jiǎn)單，只要粘貼以下代碼：
import Vue from 'vue'; export default new Vue;
當(dāng)然造車(chē)的方法有很多種，筆者只想給你最便捷的一種。
2.上車(chē)
既然坐車(chē)就要刷卡，刷卡的方式也很簡(jiǎn)單，在需要傳遞數(shù)據(jù)的組件中引入bus.js
import bus from './bus.js'
之后bus出發(fā)，在該組件中發(fā)射事件，發(fā)射事件需要一個(gè)媒介，在本篇就用button的click事件觸發(fā)：
<button @click="appmsg">bus傳遞data</button>
在methods中定義事件：
methods:{
appmsg(){
bus.$emit('getonbus','App')
}
}上車(chē)出發(fā)過(guò)程完成
3.下車(chē)
下車(chē)也要刷卡，方式相同，在需要接收數(shù)據(jù)的組件中引入bus.js
import bus from './bus.js'
在示例中提前定義了一個(gè)變量value
data(){
return{
value:"Home"
}
}到站接收數(shù)據(jù)，在接收組件的mounted中接收，代碼如下：
mounted(){
bus.$on('getonbus', val => {
this.value = val
})
}至此我們已經(jīng)完成了數(shù)據(jù)的傳輸，我們來(lái)看看效果：html代碼：
<p>{{value}}</p>效果：點(diǎn)擊前：
點(diǎn)擊后：
這確實(shí)是一個(gè)十分方便的方法，但是：事件總線方式傳遞數(shù)據(jù)同時(shí)需要及時(shí)的移除事件監(jiān)聽(tīng)，這對(duì)于初學(xué)者是個(gè)麻煩事，因此換種方法往下看吧，哈哈
$attrs / listeners
這種傳值方式主要是用于多級(jí)組件的傳值，其實(shí)還是得保持一種“血脈聯(lián)系”例如爺爺組件給孫子組件傳值，當(dāng)然這借助簡(jiǎn)單的v-bind也是可以實(shí)現(xiàn)的，但是如果我們就是想跳過(guò)父組件就可以用這種方式；
在示例中的組件關(guān)系如下：Home(爺爺)>parent(父親)>child(孩子)
在Home中定義數(shù)據(jù)，并傳入parent：
<template>
<div class="home">
<p>{{value}}</p>
<parent :msga="a" :msgb="b" :msgc ="c"></parent>
</div>
</template>
<script>
import parent from './parent.vue'
export default {
name: 'home',
components: {
parent
},
data(){
return{
value:"Home",
a:"aaa",
b:"bbb",
c:"ccc"
}
}
}
</script>在父組件中需要定義一個(gè)v-bind
<template>
<div>
<child v-bind="$attrs"></child>
</div>
</template>在孫子組件中打印$attrs
mounted(){
console.log(this.$attrs)
}我們來(lái)看打印臺(tái)結(jié)果：
- 孫子得到了爺爺全部的數(shù)據(jù)，真正的隔代親！
- $listeners大家自己可以試試，爺爺會(huì)直接得到孫子發(fā)射的事件。
- 這種方法可以看成props / $emit的延續(xù)版，對(duì)比學(xué)習(xí)，效果更佳
VueX是筆者認(rèn)為最穩(wěn)定的非父子傳值的方法
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用Vue實(shí)現(xiàn)移動(dòng)端左滑刪除效果附源碼
這篇文章主要介紹了使用Vue實(shí)現(xiàn)移動(dòng)端左滑刪除效果，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vuex如何修改狀態(tài)state的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue實(shí)現(xiàn)點(diǎn)擊圖片放大效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)點(diǎn)擊圖片放大效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
Vue 實(shí)現(xiàn)html中根據(jù)類型顯示內(nèi)容
今天小編大家分享一篇Vue 實(shí)現(xiàn)html中根據(jù)類型顯示內(nèi)容，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
VUE前端實(shí)現(xiàn)token的無(wú)感刷新方式
這篇文章主要介紹了VUE前端實(shí)現(xiàn)token的無(wú)感刷新方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
關(guān)于vue的element-ui web端引入高德地圖并獲取經(jīng)緯度
這篇文章主要介紹了關(guān)于vue的element-ui web端引入高德地圖并獲取經(jīng)緯度,高德地圖首先要去申請(qǐng)key和密鑰,文中提供了部分實(shí)現(xiàn)代碼和解決思路,感興趣的朋友可以學(xué)習(xí)一下2023-04-04
解決vue+router路由跳轉(zhuǎn)不起作用的一項(xiàng)原因
這篇文章主要介紹了解決vue+router路由跳轉(zhuǎn)不起作用的一項(xiàng)原因，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
iview實(shí)現(xiàn)動(dòng)態(tài)表單和自定義驗(yàn)證時(shí)間段重疊
這篇文章主要介紹了iview實(shí)現(xiàn)動(dòng)態(tài)表單和自定義驗(yàn)證時(shí)間段重疊，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
vue-router之路由鉤子函數(shù)應(yīng)用小結(jié)
vue-router提供的導(dǎo)航鉤子主要用來(lái)攔截導(dǎo)航,讓它完成跳轉(zhuǎn)或取消，本文主要介紹了vue-router之路由鉤子函數(shù)應(yīng)用小結(jié)，具有一定的參考價(jià)值，感興趣的可以了解一下2024-01-01
在Vue.js應(yīng)用開(kāi)發(fā)中,Vue Router 提供了許多特性來(lái)簡(jiǎn)化前端路由管理和用戶體驗(yàn),其中一個(gè)重要的特性便是路由重定向和別名,它們可以幫助我們更好地管理和組織路由,本文將詳細(xì)介紹如何在Vue Router中使用路由重定向和別名,需要的朋友可以參考下2024-09-09