vue 组件之间的通信 $emit $on方法

vue组件通信的方式

一. 父组件向子组件传值

1. 父组件准备好数据

  export default {
    data() {
      return {
        page:{
          pageIndex: 1,
          pageSize: 10,
          total: 10,
        },
      }
    },
  }

2. 子组件接受父组件传过来的数据

  export default {
    data() {
      return {}
    },
    props: ['page']
  }

二. 子组件向父组件传值

1. 子组件使用 this.$emit('page-data', this.page);

  export default {
    data() {
      return {};
    },
    props: ['page'],
    methods: {
      handleSizeChange(val) {
        this.page.pageSize = val;
        this.$emit('page-data',this.page);
      },
    },
  }

2. 父组件接受数据 -- 通过子组件上的自定义方法接受数据

<page-list :page="page" v-on:page-data="pageData"></page-list>
 export default {
    data() {
      return {};
    },
    props: ['page'],
    methods: {
      pageData(val) {
          // 接受到的数据
      },
    },
  }

三. 兄弟组件之间的同学

1. 新建一个 yk-vue.js 用来创建一个空的 vue实列

import Vue from 'Vue';
export default new Vue;

2. A组件引入 yk-vue.js文件

import newVue from '@/assets/js/yk-vue.js'
export default {
  methods: {
    searchBtn () {
        newVue.$emit('search', 'hello');
    },    
  }
}

3.B组件引入 yk-vue.js 文件

import newVue from '@/assets/js/yk-vue.js'
export default {
    mounted () {
        this.getList();
        newVue.$on('search', function(data){
            // 接受到 A 组件数据
        });
    },
}