Vue 的組件作用域都是孤立的，不允許在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。必須使用特定的方法才能實(shí)現(xiàn)組件之間的數(shù)據(jù)傳遞。組件之間傳遞數(shù)據(jù)大致分為三種情況：

目前成都創(chuàng)新互聯(lián)公司已為近1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、民勤網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

父組件向子組件傳遞數(shù)據(jù)，通過 props 傳遞數(shù)據(jù)。

子組件向父組件傳遞數(shù)據(jù)，通過 events 傳遞數(shù)據(jù)。

兩個(gè)同級組件之間傳遞數(shù)據(jù)，通過 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ì)算屬性中對 prop 進(jìn)行處理

export default {
  props: ['message'],
  computed: {
    newMessage(){
      return this.message + ' 哈哈哈';
    }
  }
}

二、子組件向父組件傳遞數(shù)據(jù)

子組件主要通過實(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事件來調(diào)用sendUser。

<script>
 export default {
  name: 'parend',
  data () {
   return {
     username: ''
   }
  },
  methods: {
   sendUser () {
    this.$emit('changeName', this.username)
   }
  }
}
</script>

在sendUser中，使用$emit來遍歷changeName事件，并返回this.name，其中changeName是一個(gè)自定義的事件，功能類似于一個(gè)中轉(zhuǎn)，this.name將通過這個(gè)事件傳遞給父組件。

父組件部分：

<template>
  <div class="parent">
    <child @changeName="getUser"></child>
    <p>用戶名：{{user}}</p>
  </div>
</template>

在父組件中聲明了一個(gè)getUser方法，用changeName事件調(diào)用getUser方法，獲取從子組件傳遞過來的參數(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就是從子組件中傳遞過來的參數(shù)uesrname。

三、同級組件間的數(shù)據(jù)傳遞

有時(shí)候兩個(gè)組件也需要通信（非父子關(guān)系）。當(dāng)然Vue2.0提供了Vuex，但在簡單的場景下，可以使用一個(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抽離出來：

//Bus.js
import Vue from 'vue'
const Bus = new Vue()
expore default Bus

組件調(diào)用時(shí)引用（import Bus from './Bus.js'）

但這種引入方式，經(jīng)過webpack打包后可能會(huì)出現(xiàn)Bus局部作用域的情況，即引用的是兩個(gè)不同的Bus，導(dǎo)致不能正常通信
實(shí)際運(yùn)用：

將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()來調(diào)用

總結(jié)

以上所述是小編給大家介紹的vue組件中的數(shù)據(jù)傳遞方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！

網(wǎng)頁名稱：vue組件中的數(shù)據(jù)傳遞方法
網(wǎng)頁路徑：http://aaarwkj.com/article44/igjdhe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、搜索引擎優(yōu)化、、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)