溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Vue 的組件作用域都是孤立的，不允許在子組件的模板內直接引用父組件的數據。必須使用特定的方法才能實現組件之間的數據傳遞。組件之間傳遞數據大致分為三種情況：
父組件向子組件傳遞數據，通過 props 傳遞數據。
子組件向父組件傳遞數據，通過 events 傳遞數據。
兩個同級組件之間傳遞數據，通過 event bus 傳遞數據。
子組件部分：
<template>
<div class="child">
{{ msg }}
</div>
</template>
<script>
export default {
name: 'child',
data(){
return {
}
},
props: ['msg']
</script>
在child.vue中，msg實在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>
在調用組件的時候，使用v-bind將msg的值綁定為parent.vue中定義的變量message，這樣就能將parent.vue中的message的值傳給child.vue了。
單項數據流
當父組件的 message 發生改變，子組件也會自動地更新視圖。但是在子組件中，我們不要去修改 prop。如果你必須要修改到這些數據，你可以使用以下方法：
方法一：把 prop 賦值給一個局部變量，然后需要修改的話就修改這個局部變量，而不影響 prop
export default {
data(){
return {
newMessage: null
}
},
props: ['message'],
created(){
this.newMessage = this.message;
}
}
方法二：在計算屬性中對 prop 進行處理
export default {
props: ['message'],
computed: {
newMessage(){
return this.message + ' 哈哈哈';
}
}
}
子組件主要通過實踐傳遞數據給父組件的
子組件部分：
<template> <div class="child"> <span>用戶名：</span> <input v-model="username" @change="sendUser" /> </div> </template>
子組件的html中，當input中的值發生改變時，將username傳遞給parent.vue。
首先聲明了一個sendUser方法，用change事件來調用sendUser。
<script>
export default {
name: 'parend',
data () {
return {
username: ''
}
},
methods: {
sendUser () {
this.$emit('changeName', this.username)
}
}
}
</script>
在sendUser中，使用$emit來遍歷changeName事件，并返回this.name，其中changeName是一個自定義的事件，功能類似于一個中轉，this.name將通過這個事件傳遞給父組件。
父組件部分：
<template>
<div class="parent">
<child @changeName="getUser"></child>
<p>用戶名：{{user}}</p>
</div>
</template>
在父組件中聲明了一個getUser方法，用changeName事件調用getUser方法，獲取從子組件傳遞過來的參數username
<script>
import child from './child.vue'
export default {
name: 'parent',
components: { child },
data () {
return {
user: ''
}
},
methods: {
getUser(data) {
this.user = data
}
}
}
</script>
getUser方法中的參數msg就是從子組件中傳遞過來的參數uesrname。
有時候兩個組件也需要通信（非父子關系）。當然Vue2.0提供了Vuex，但在簡單的場景下，可以使用一個空的Vue實例作為中央事件總線。
<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）定義在一個組件中，在實際的運用中一般會新建一Bus.js
export default {
name: 'c1',
data () {
return {
message: 'hi'
}
},
methods: {
changeMsg () { //點擊按鈕，將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>
在實際運用中，一般將bus抽離出來：
//Bus.js import Vue from 'vue' const Bus = new Vue() expore default Bus
組件調用時引用（import Bus from './Bus.js'）
但這種引入方式，經過webpack打包后可能會出現Bus局部作用域的情況，即引用的是兩個不同的Bus，導致不能正常通信
實際運用：
將Bus注入到Vue根對象中
import Vue from 'vue'
const Bus = new Vue()
var app= new Vue({
el:'#app',
data:{
Bus
}
})
在子組件中通過this.$root.Bus.$on(),this.$root.Bus.$emit()來調用
總結
以上所述是小編給大家介紹的vue組件中的數據傳遞方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
