vue組件中的數(shù)據(jù)傳遞方法
Vue 的組件作用域都是孤立的，不允許在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。必須使用特定的方法才能實(shí)現(xiàn)組件之間的數(shù)據(jù)傳遞。組件之間傳遞數(shù)據(jù)大致分為三種情況：
父組件向子組件傳遞數(shù)據(jù)，通過(guò) props 傳遞數(shù)據(jù)。
子組件向父組件傳遞數(shù)據(jù)，通過(guò) events 傳遞數(shù)據(jù)。
兩個(gè)同級(jí)組件之間傳遞數(shù)據(jù)，通過(guò) event bus 傳遞數(shù)據(jù)。
一、父組件向子組件傳遞數(shù)據(jù)
子組件部分：
<template>
<div class="child">
{{ msg }}
</div>
</template>
<script>
export default {
name: 'child',
data(){
return {
}
},
props: ['msg']
</script>
在child.vue中，msg實(shí)在data中定義的變量，使用props：['msg']從父組件中獲取msg的值
父組件部分：
<template>
<div class="child">
child
<child :msg="message"></child>
</div>
</template>
<script>
import child from './child.vue'
export default {
name: 'parent',
components: { child },
data () {
return {
message: 'hello vue'
}
}
}
</script>
在調(diào)用組件的時(shí)候，使用v-bind將msg的值綁定為parent.vue中定義的變量message，這樣就能將parent.vue中的message的值傳給child.vue了。
單項(xiàng)數(shù)據(jù)流
當(dāng)父組件的 message 發(fā)生改變，子組件也會(huì)自動(dòng)地更新視圖。但是在子組件中，我們不要去修改 prop。如果你必須要修改到這些數(shù)據(jù)，你可以使用以下方法：
方法一：把 prop 賦值給一個(gè)局部變量，然后需要修改的話就修改這個(gè)局部變量，而不影響 prop
export default {
data(){
return {
newMessage: null
}
},
props: ['message'],
created(){
this.newMessage = this.message;
}
}
方法二：在計(jì)算屬性中對(duì) prop 進(jìn)行處理
export default {
props: ['message'],
computed: {
newMessage(){
return this.message + ' 哈哈哈';
}
}
}
二、子組件向父組件傳遞數(shù)據(jù)
子組件主要通過(guò)實(shí)踐傳遞數(shù)據(jù)給父組件的
子組件部分：
<template> <div class="child"> <span>用戶名：</span> <input v-model="username" @change="sendUser" /> </div> </template>
子組件的html中，當(dāng)input中的值發(fā)生改變時(shí)，將username傳遞給parent.vue。
首先聲明了一個(gè)sendUser方法，用change事件來(lái)調(diào)用sendUser。
<script>
export default {
name: 'parend',
data () {
return {
username: ''
}
},
methods: {
sendUser () {
this.$emit('changeName', this.username)
}
}
}
</script>
在sendUser中，使用$emit來(lái)遍歷changeName事件，并返回this.name，其中changeName是一個(gè)自定義的事件，功能類似于一個(gè)中轉(zhuǎn)，this.name將通過(guò)這個(gè)事件傳遞給父組件。
父組件部分：
<template>
<div class="parent">
<child @changeName="getUser"></child>
<p>用戶名：{{user}}</p>
</div>
</template>
在父組件中聲明了一個(gè)getUser方法，用changeName事件調(diào)用getUser方法，獲取從子組件傳遞過(guò)來(lái)的參數(shù)username
<script>
import child from './child.vue'
export default {
name: 'parent',
components: { child },
data () {
return {
user: ''
}
},
methods: {
getUser(data) {
this.user = data
}
}
}
</script>
getUser方法中的參數(shù)msg就是從子組件中傳遞過(guò)來(lái)的參數(shù)uesrname。
三、同級(jí)組件間的數(shù)據(jù)傳遞
有時(shí)候兩個(gè)組件也需要通信（非父子關(guān)系）。當(dāng)然Vue2.0提供了Vuex，但在簡(jiǎn)單的場(chǎng)景下，可以使用一個(gè)空的Vue實(shí)例作為中央事件總線。
<template>
<div id="app">
<c1></c1> //組件1
<c2></c2> //組件2
</div>
</template>
組件c1中：
<template>
<div class="c1">
page
<button @click="changeMsg">click</button>
</div>
</template>
<script>
var Bus = new Vue(); //為了方便將Bus（空vue）定義在一個(gè)組件中，在實(shí)際的運(yùn)用中一般會(huì)新建一Bus.js
export default {
name: 'c1',
data () {
return {
message: 'hi'
}
},
methods: {
changeMsg () { //點(diǎn)擊按鈕，將this.message傳遞給c2
bus.$emit('sendMsg', this.message)
}
}
}
</script>
組件c2中：
<template>
<div class="c2">
{{msg}}
</div>
</template>
<script>
var Bus = new Vue();
export default {
name: 'c2',
data () {
return {
msg: ''
}
},
created () {
bus.$on('sendMsg',(data)=>{ //data即為c1組件中的message
this.msg = data
})
}
}
</script>
在實(shí)際運(yùn)用中，一般將bus抽離出來(lái)：
//Bus.js import Vue from 'vue' const Bus = new Vue() expore default Bus
組件調(diào)用時(shí)引用（import Bus from './Bus.js'）
但這種引入方式，經(jīng)過(guò)webpack打包后可能會(huì)出現(xiàn)Bus局部作用域的情況，即引用的是兩個(gè)不同的Bus，導(dǎo)致不能正常通信
實(shí)際運(yùn)用：
將Bus注入到Vue根對(duì)象中
import Vue from 'vue'
const Bus = new Vue()
var app= new Vue({
el:'#app',
data:{
Bus
}
})
在子組件中通過(guò)this.$root.Bus.$on(),this.$root.Bus.$emit()來(lái)調(diào)用
總結(jié)
以上所述是小編給大家介紹的vue組件中的數(shù)據(jù)傳遞方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- Vuejs第九篇之組件作用域及props數(shù)據(jù)傳遞實(shí)例詳解
- vue父子組件的數(shù)據(jù)傳遞示例
- Vue.js實(shí)戰(zhàn)之組件之間的數(shù)據(jù)傳遞
- Vue 父子組件的數(shù)據(jù)傳遞、修改和更新方法
- Vue2.0組件間數(shù)據(jù)傳遞示例
- vuejs2.0實(shí)現(xiàn)分頁(yè)組件使用$emit進(jìn)行事件監(jiān)聽(tīng)數(shù)據(jù)傳遞的方法
- Vue表單類的父子組件數(shù)據(jù)傳遞示例
- Vue 父子組件數(shù)據(jù)傳遞的四種方式( inheritAttrs + $attrs + $listeners)
- Vuejs 組件——props數(shù)據(jù)傳遞的實(shí)例代碼
- vue組件之間數(shù)據(jù)傳遞的方法實(shí)例分析
相關(guān)文章
vue項(xiàng)目首屏加載過(guò)慢的一些解決方案
最近碰到vue項(xiàng)目打包上線后,第一次打開(kāi)首頁(yè)后會(huì)出現(xiàn)空白、加載時(shí)間過(guò)長(zhǎng)的情況,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目首屏加載過(guò)慢的一些解決方案,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
vue中動(dòng)態(tài)修改img標(biāo)簽中src的方法實(shí)踐
本文主要介紹了vue中動(dòng)態(tài)修改img標(biāo)簽中src的方法實(shí)踐,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
Vue時(shí)間軸 vue-light-timeline的用法說(shuō)明
這篇文章主要介紹了Vue時(shí)間軸 vue-light-timeline的用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
WebStorm啟動(dòng)vue項(xiàng)目報(bào)錯(cuò)代碼:1080?throw?err解決辦法
在使用webstorm新建vue項(xiàng)目時(shí)常會(huì)遇到一些報(bào)錯(cuò),下面這篇文章主要給大家介紹了關(guān)于WebStorm啟動(dòng)vue項(xiàng)目報(bào)錯(cuò)代碼:1080?throw?err的解決辦法,文中將解決辦法介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
vue.js中created()與activated()的個(gè)人使用解讀
這篇文章主要介紹了vue.js中created()與activated()的個(gè)人使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
如何在vite初始化項(xiàng)目中安裝scss以及scss的使用
今天想要給vite項(xiàng)目,添加全局的scss變量文件引用,這樣我們?cè)谑褂胹css變量和函數(shù)的時(shí)候就不需要每個(gè)組件都取引用了,下面這篇文章主要給大家介紹了關(guān)于如何在vite初始化項(xiàng)目中安裝scss以及scss使用的相關(guān)資料,需要的朋友可以參考下2022-10-10
vue實(shí)現(xiàn)表格數(shù)據(jù)的增刪改查
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表格數(shù)據(jù)的增刪改查，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
nuxt框架中對(duì)vuex進(jìn)行模塊化設(shè)置的實(shí)現(xiàn)方法
這篇文章主要介紹了nuxt框架中對(duì)vuex進(jìn)行模塊化設(shè)置的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue.js源代碼core scedule.js學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了vue.js源代碼core scedule.js的學(xué)習(xí)筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
vue+element下日期組件momentjs轉(zhuǎn)換賦值問(wèn)題解決
這篇文章主要介紹了vue+element下日期組件momentjs轉(zhuǎn)換賦值問(wèn)題,記錄下使用momentjs轉(zhuǎn)換日期字符串賦值給element的日期組件報(bào)錯(cuò)問(wèn)題，需要的朋友可以參考下2024-02-02