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

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

五種方法為：1、父組件向子組件進行傳值；2、子組件向父組件進行傳值；3、父組件中的標簽上定義自定義事件，在事件內部獲取參數；4、在子組件中觸發自定義事件，并傳參；5、通過公共組件Bus.js,進行傳參。

本教程操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

vue組件傳值的五種方法：

1、父組件向子組件進行傳值：

在子組件綁定父的數據，子組件通過props接受參數。

接下來我們通過一個例子，說明父組件如何向子組件傳遞值：在子組件Users.vue中如何獲取父組件App.vue中的數據 users:["Henry","Bucky","Emily"]

//App.vue父組件
<template>
  <div id="app">
    <users v-bind:users="users"></users>//前者自定義名稱便于子組件調用，后者要傳遞數據名
  </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>//遍歷傳遞過來的值，然后呈現到頁面
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props:{
    users:{           //這個就是父組件中子標簽自定義名字
      type:Array,
      required:true
    }
  }
}
</script>

2、子組件向父組件進行傳值：

父組件內設置要傳的數據『data(){ id: value}』

接下來我們通過一個例子，說明子組件如何向父組件傳遞值：當我們點擊“Vue.js Demo”后，子組件向父組件傳遞值，文字由原來的“傳遞的是一個值”變成“子向父組件傳值”，實現子組件向父組件值的傳遞。

// 子組件
<template>
  <header>
    <h2 @click="changeTitle">{{title}}</h2>//綁定一個點擊事件
  </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)接受傳遞過來的文字
    <h3>{{title}}</h3>
  </div>
</template>
<script>
import Header from "./components/Header"
export default {
  name: 'App',
  data(){
    return{
      title:"傳遞的是一個值"
    }
  },
  methods:{
    updateTitle(e){   //聲明這個函數
      this.title = e;
    }
  },
  components:{
   "app-header":Header,
  }
}
</script>

3、父組件中的標簽上定義自定義事件，在事件內部獲取參數；

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

5、通過公共組件Bus.js,進行傳參

Vue的優點

Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“vue兄弟組件傳值的方法有哪些”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!