Vue基礎篇：非父子組件間的數據傳遞

時間 2019-11-17

標籤 vue 基礎父子組件數據傳遞简体版

原文原文鏈接

常見父子組件的數據傳遞

父組件經過props方式向子組件傳遞數據，而子組件經過$emit的事件方式對父組件傳遞數據javascript

父組件 -> props -> 子組件  子組件 -> $emit -> 父組件 
複製代碼

Vue官方對於vue框架的定義是輕量級的視圖層框架，當項目中出現很複雜的數據傳遞時（主要在於同級組件之間須要進行數據傳遞的話，若是單純地靠一層層的傳遞，可能會讓項目變得更加複雜），因此單純依靠Vue框架是解決不了複雜的數據傳遞的，此時咱們須要引入一些工具或者設計模式來解決vue之中組件之間複雜的數據傳遞。html

兩種方案

數據層的框架——Vuex
發佈訂閱模式（又稱爲：總線機制/Bus/觀察者模式）

總線機制 Bus:

需求: 點擊組件A 會改變組件B的內容，且顯示組件A的內容，點擊組件B 會改變組件A的內容，且顯示組件B的內容。實現兩個同級組件之間的數據傳遞？vue

<!DOCTYPE html>
<html>
<head>
    <title>組件</title>
    <script type="text/javascript" src="./vue-dev.js"></script>
</head>
<body>
    <div id="app">
        <child content="chonglou"></child>
        <child content="hello world"></child>
    </div>
    <script type="text/javascript">

     //添加總線機制
     Vue.prototype.bus = new Vue();

     Vue.component('child', {
         props: ["content"],
         template: '<div @click="handleClickEvent">{{message}}</div>',
         data() {
             return {
                 message: this.content
             }
         },

         //掛載時調用
         mounted(){
              var that = this;
              this.bus.$on('change',function(res){ //對事件進行監聽
                     that.message = res;
              })
         },
         methods: {
              handleClickEvent: function() {
                 this.bus.$emit('change',this.message)
              }
         },
    })

    var vm = new Vue({
        el: '#app',
       
    })
    </script>
</body>
</html>
複製代碼

解析:java

1. 總線機制也屬於單向數據流，A,B都會監聽同一個事件響應，因此只會被修改一次。

2. Vue.prototype.bus = new Vue(); 在prototype上掛載了一個全局bus屬性，該bus屬性指定一個vue實例。 在以後，只要調用 new.Vue 或者建立組件時，每一個組件上都會有 bus 這個屬性，而在Vue的 prototype 掛載一個 bus 的屬性，都指向同一個 Vue 的實例

3. this.bus.$emit('change', this.content) ，this.bus等同於Vue.prototype.bus = new Vue () 上掛載的 bus ，同時 bus 做爲Vue實例，具有使用‘$emit’，而且向外觸發事件的同時攜帶要傳遞的數據內容

4. 向外觸發事件以後，其餘組件將經過'$on'監聽的方式接收數據 方式：藉助生命週期鉤子'mounted'

複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。