Vue-组件数据通信

组件数据通信

父组件 => 子组件

• props

  • 父组件

    <template>
      <div id="app">
        <ChildA msg="App send Data to ChildA"/>
        <ChildB />
      </div>
    </template>
    
    <script>
    import ChildA from '@/components/事件总线/ChildA.vue'
    import ChildB from '@/components/事件总线/ChildB.vue'
    export default {
      name: 'App',
      components: {
        ChildA,
        ChildB
      },
      methods: {
    
      }
    }
    </script>
    
    <style lang="less">
    #app {
      width: 50%;
      padding: 40px;
      margin: 0 auto;
      border: 3px solid rgb(19, 170, 230);
    }
    </style>

  • 子组件

    <template>
        <div class="child">
            {{ msg }}
        </div>
    </template>
    
    <script>
    import bus from '@/components/事件总线/bus'
    export default {
        props: {
            msg: String
        },
    }
    </script>
    
    <style scoped>
    .child {
        padding: 20px;
        margin: 5px;
        border: 3px solid green;
    }
    </style>

  • 渲染结果

    渲染结果

子组件 => 父组件

• 父组件接受数据

  <template>
    <div id="app">
      <ChildB @send-msg="SendMsg" />
      <p>
        接受子组件传递的数据 => {{ msg }}
      </p>
    </div>
  </template>
  
  <script>
  import ChildB from '@/components/事件总线/ChildB.vue'
  export default {
    name: 'App',
    components: {
      ChildB
    },
    data() {
      return {
        msg: ''
      }
    },
    methods: {
      SendMsg(data) {
        this.msg = data
      }
    }
  }
  </script>
  
  <style lang="less">
  #app {
    width: 50%;
    padding: 40px;
    margin: 0 auto;
    border: 3px solid rgb(19, 170, 230);
  }
  </style>

• 子组件传递数据

  <template>
      <div class="child">
          <button @click="EmitSendMsg">触发自定义事件</button>
      </div>
  </template>
  
  <script>
  export default {
      data() {
          return {
              data: '...................'
          }
      },
      methods: {
          EmitSendMsg() {
              this.$emit('send-msg', this.data)
          }
      }
  }
  </script>
  
  <style scoped>
  .child {
      padding: 20px;
      margin: 5px;
      border: 3px solid blue;
  }
  </style>

兄弟组件

• 事件总线原理

  事件总线的原理，就是我们通过new Vue 再创建一个新的 Vue 实例对象bus，将该实例作为组件之间传值的桥梁。

• 事件总线分析

  事件总线

• vue2 实现

  • 定义bus.js

    import Vue from "vue";
    const bus = new Vue();
    export default bus;

  • 定义发送方组件

    <template>
        <div class="child">
            发送数据 => ChildA
            <button @click="sendData">发送数据</button>
        </div>
    </template>
    
    <script>
    import bus from '@/components/事件总线/bus'
    export default {
        created() {
    
        },
        methods: {
            sendData() {
                bus.$emit('getData', "I'm send data.................")
            }
        }
    }
    </script>
    
    <style scoped>
    .child {
        padding: 20px;
        margin: 5px;
        border: 3px solid green;
    }
    </style>

  • 定义接受方组件

    <template>
        <div class="child">
            接受数据 => {{ msg }}
        </div>
    </template>
    
    <script>
    import bus from '@/components/事件总线/bus'
    export default {
        created() {
            bus.$on('getData', (data) => {
                this.msg = data
            })
        },
        data() {
            return {
                msg: ''
            }
        },
        methods: {
    
        }
    }
    </script>
    
    <style scoped>
    .child {
        padding: 20px;
        margin: 5px;
        border: 3px solid blue;
    }
    </style>

  • 渲染

    渲染