vue項目中的組件傳值方式
vue項目中組件傳值
父子通信
父組件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">點擊</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 = '已更改為傳來的參數(shù)：'+res
? ? ? ? }
? ? },
? ? components:{
? ? ? ? child
? ? }
}
</script>vue非父子組件傳值
非父子組件傳值
（1）事件總線
（2）$attrs / listeners
事件總線
事件總線的原理就是：
創(chuàng)建一個公共的Js文件，讓其專門負責傳值。就像公共的交通工具bus，data可以乘坐這輛bus到達指定的站臺（相應的組件）
那么首先要做的就是在我們的項目中創(chuàng)造這輛bus
1.閉門造車（創(chuàng)建公用JS文件）
首先得在城市中（src目錄下）租塊地（創(chuàng)建一個文件夾），放置這輛bus。
bus.js的創(chuàng)建十分簡單，只要粘貼以下代碼：
import Vue from 'vue'; export default new Vue;
當然造車的方法有很多種，筆者只想給你最便捷的一種。
2.上車
既然坐車就要刷卡，刷卡的方式也很簡單，在需要傳遞數(shù)據(jù)的組件中引入bus.js
import bus from './bus.js'
之后bus出發(fā)，在該組件中發(fā)射事件，發(fā)射事件需要一個媒介，在本篇就用button的click事件觸發(fā)：
<button @click="appmsg">bus傳遞data</button>
在methods中定義事件：
methods:{
appmsg(){
bus.$emit('getonbus','App')
}
}上車出發(fā)過程完成
3.下車
下車也要刷卡，方式相同，在需要接收數(shù)據(jù)的組件中引入bus.js
import bus from './bus.js'
在示例中提前定義了一個變量value
data(){
return{
value:"Home"
}
}到站接收數(shù)據(jù)，在接收組件的mounted中接收，代碼如下：
mounted(){
bus.$on('getonbus', val => {
this.value = val
})
}至此我們已經(jīng)完成了數(shù)據(jù)的傳輸，我們來看看效果：html代碼：
<p>{{value}}</p>效果：點擊前：
點擊后：
這確實是一個十分方便的方法，但是：事件總線方式傳遞數(shù)據(jù)同時需要及時的移除事件監(jiān)聽，這對于初學者是個麻煩事，因此換種方法往下看吧，哈哈
$attrs / listeners
這種傳值方式主要是用于多級組件的傳值，其實還是得保持一種“血脈聯(lián)系”例如爺爺組件給孫子組件傳值，當然這借助簡單的v-bind也是可以實現(xià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>在父組件中需要定義一個v-bind
<template>
<div>
<child v-bind="$attrs"></child>
</div>
</template>在孫子組件中打印$attrs
mounted(){
console.log(this.$attrs)
}我們來看打印臺結果：
- 孫子得到了爺爺全部的數(shù)據(jù)，真正的隔代親！
- $listeners大家自己可以試試，爺爺會直接得到孫子發(fā)射的事件。
- 這種方法可以看成props / $emit的延續(xù)版，對比學習，效果更佳
VueX是筆者認為最穩(wěn)定的非父子傳值的方法
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue2.0 資源文件assets和static的區(qū)別詳解
這篇文章主要介紹了vue2.0 資源文件assets和static的區(qū)別，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了vue組件中實現(xiàn)嵌套子組件案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
VUE + OPENLAYERS實現(xiàn)實時定位功能
本系列文章介紹一個簡單的實時定位示例，基于VUE + OPENLAYERS實現(xiàn)實時定位功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-09-09
小編給大家整理了關于vue移動端日期選擇組件的知識點總結，希望能夠給讀者帶來幫助，一起學習參考下。2018-02-02
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)回到頂部動畫效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了解決Vue 移動端點擊出現(xiàn)300毫秒延遲的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue?如何綁定disabled屬性讓其不能被點擊，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue style width a href動態(tài)拼接問題的解決
這篇文章主要介紹了vue style width a href動態(tài)拼接問題的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要給大家介紹了關于如何通過Vue3+Element?Plus自定義彈出框組件的相關資料,彈窗是前端開發(fā)中的一種常見需求,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-05-05
這篇文章主要為大家詳細介紹了vue實現(xiàn)圖書管理系統(tǒng)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12