vue兄弟組件傳值的方法有哪些

這篇文章主要介紹了vue兄弟組件傳值的方法有哪些，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

五種方法為：1、父組件向子組件進(jìn)行傳值；2、子組件向父組件進(jìn)行傳值；3、父組件中的標(biāo)簽上定義自定義事件，在事件內(nèi)部獲取參數(shù)；4、在子組件中觸發(fā)自定義事件，并傳參；5、通過(guò)公共組件Bus.js,進(jìn)行傳參。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

vue組件傳值的五種方法：

1、父組件向子組件進(jìn)行傳值：

在子組件綁定父的數(shù)據(jù)，子組件通過(guò)props接受參數(shù)。

接下來(lái)我們通過(guò)一個(gè)例子，說(shuō)明父組件如何向子組件傳遞值：在子組件Users.vue中如何獲取父組件App.vue中的數(shù)據(jù) users:["Henry","Bucky","Emily"]

//App.vue父組件
<template>
  <div id="app">
    <users v-bind:users="users"></users>//前者自定義名稱便于子組件調(diào)用，后者要傳遞數(shù)據(jù)名
  </div>
</template>
<script>
import Users from "./components/Users"
export default {
  name: 'App',
  data(){
    return{
      users:["Henry","Bucky","Emily"]
    }
  },
  components:{
    "users":Users
  }
}

//users子組件
<template>
  <div class="hello">
    <ul>
      <li v-for="user in users">{{user}}</li>//遍歷傳遞過(guò)來(lái)的值，然后呈現(xiàn)到頁(yè)面
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props:{
    users:{           //這個(gè)就是父組件中子標(biāo)簽自定義名字
      type:Array,
      required:true
    }
  }
}
</script>

2、子組件向父組件進(jìn)行傳值：

父組件內(nèi)設(shè)置要傳的數(shù)據(jù)『data(){ id: value}』

接下來(lái)我們通過(guò)一個(gè)例子，說(shuō)明子組件如何向父組件傳遞值：當(dāng)我們點(diǎn)擊“Vue.js Demo”后，子組件向父組件傳遞值，文字由原來(lái)的“傳遞的是一個(gè)值”變成“子向父組件傳值”，實(shí)現(xiàn)子組件向父組件值的傳遞。

// 子組件
<template>
  <header>
    <h2 @click="changeTitle">{{title}}</h2>//綁定一個(gè)點(diǎn)擊事件
  </header>
</template>
<script>
export default {
  name: 'app-header',
  data() {
    return {
      title:"Vue.js Demo"
    }
  },
  methods:{
    changeTitle() {
      this.$emit("titleChanged","子向父組件傳值");//自定義事件  傳遞值“子向父組件傳值”
    }
  }
}
</script>

// 父組件
<template>
  <div id="app">
    <app-header v-on:titleChanged="updateTitle" ></app-header>//與子組件titleChanged自定義事件保持一致
   // updateTitle($event)接受傳遞過(guò)來(lái)的文字
    <h3>{{title}}</h3>
  </div>
</template>
<script>
import Header from "./components/Header"
export default {
  name: 'App',
  data(){
    return{
      title:"傳遞的是一個(gè)值"
    }
  },
  methods:{
    updateTitle(e){   //聲明這個(gè)函數(shù)
      this.title = e;
    }
  },
  components:{
   "app-header":Header,
  }
}
</script>

3、父組件中的標(biāo)簽上定義自定義事件，在事件內(nèi)部獲取參數(shù)；

4、在子組件中觸發(fā)自定義事件，并傳參。（this.$ emit('父組件中的自定義事件',參數(shù))）

5、通過(guò)公共組件Bus.js,進(jìn)行傳參

Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁(yè)面使用的是局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問(wèn)速度和用戶體驗(yàn)。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue兄弟組件傳值的方法有哪些”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!