vue组件之间数据通信操作

image.png

父组件通知子组件
父组件向子组件传递数据可以通过props
props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值

<template>
  <div class="index">
    <!-- 父组件 -->
    <IndexHead  v-bind:banner-info="bannerList"></IndexHead>
  </div>
</template>

<template>
  <div class="indexhead">
      <!-- 子组件 -->
      <div  v-if="bannerInfo" v-for="banner in bannerInfo" >
      </div>
  </div>
</template>
<script>
export default {
  name: 'IndexHead',
  props:['bannerInfo'],
  data () {
      return {
        myswiper:''"
      }
    }
}
</script>

子组件通知父组件
简单来说通过$emit触发实例的事件，将数据传给监听器回调

 <!-- 父组件 -->
<template>
  <component-a  v-on:child-say="listenMe"></component-a>
  <p>Do you like me? {{childWords}}</p>
</template>
 methods: {
            listenMe: function (somedata){
              this.childWords = somedata
            }
 }

 <!-- 子组件 -->
<button v-on:click="onClickMe">like!</button>

methods: {
      onClickMe: function(){
        this.$emit('child-say',this.somedata);
      }
    }

非父子组件通信
在vue官网上介绍了非父子组件通信的方法，用过bus来承载数据
在简单的场景下可以使用一个空的vue实例作为中央事件总线
中央事件总线

// 根组件（this.$root)
new Vue({
  el: '#app',
  router,
  render: h => h(App),
  data: {
   // 空的实例放到根组件下，所有的子组件都能调用
    Bus: new Vue()
  }
})

以下两个组件为兄弟组件，

<button @click="submit">提交<button>

methods: {
   submit() {
     // 事件名字自定义，用不同的名字区别事件
      this.$root.Bus.$emit('eventName', 123)
    }
 }

// 当前实例创建完成就监听这个事件
  created(){
    this.$root.Bus.$on('eventName', value => {
      this.print(value)
    })
  },

  methods: {
    print(value) {
      console.log(value)
    }
  },

  // 在组件销毁时别忘了解除事件绑定
  beforeDestroy() {
     this.$root.Bus.$off('eventName')
  }

vue组件之间数据通信操作

推荐阅读更多精彩内容