组件通讯的方式有哪些

• props传递数据

步骤：

• 首先，在子组件中声明props选项

• 其次，在子组件中使用v-bind指令动态绑定属性，通过插值表达式动态获取数据

• 最后，在父组件的template中调用子组件标签的使用传递数据

示例：

 在子组件MovieItem.vue中

<template>  <div class="series-item-box">    <div>      <img        :src="imgpath"      />    </div>    <div class="detail">      <div class="detail-title">{{title}}</div>      <div class="detail-score">{{score}}</div>    </div>  </div></template><script>export default {    props:['imgpath','title','score']};</script>

在父组件MovieList.vue中

<template>    <div>        <movie-item             imgpath="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2455050536.jpg"            title="大话西游之大圣娶亲"            score="9.6"/>        <movie-item             imgpath="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2614949805.jpg"            title="哈利·波特与魔法"            score="9.0"/>        <movie-item             imgpath="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2614359276.jpg"            title="当幸福来敲门"            score="9.3"/>    </div></template><script>import MovieItem from './MovieItem.vue'export default {    components:{        MovieItem    }}

• 自定义事件及$emit方法

语法：this.$emit('event',val)

步骤：

• 首先，子组件在触发事件时调用this.$emit()设置自定义事件并传值

• 其次，在父组件引用子组件标签时使用@自定义事件=“接受子组件传递数据的方法”设置接受方法

• 最后，在父组件中使用接受方法中获取数据并使用

在子组件中

<template>  <div class="series-item-box">    <div class="pic">      <img        :src="imgpath"      />    </div>    <div class="detail">      <div class="detail-title">{{title}}</div>      <div class="detail-score">{{score}}</div>    </div>    <div>        <button @click="bookTicket">购票</button>    </div>  </div></template><script>export default {    props:['imgpath','title','score'],    methods:{        bookTicket(){            this.$emit('make',this.title)        }    }};</script>

在父组件中

<template>    <div>        <movie-item             imgpath="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2614359276.jpg"            title="当幸福来敲门"            score="9.3"            @make="getval"/>    </div></template><script>import MovieItem from './MovieItem.vue'export default {    components:{        MovieItem    },    methods:{        getval(val){           console.log(val);        }    }}</script>

• 事件总线

步骤：

• 创建eventBus.js模块，并向外共享一个Vue的实例对象

• 在数据发送方，调用bus.$emit('事件名称',要发送的数据)方法触发自定义事件

• 在数据接收方，调用bus.$on('事件名称',事件处理函数)方法注册一个自定义事件

新建 eventBus.js

import Vue from 'vue'export default new Vue();

数据发送方

<template>    <button @click="send">发送数据</button></template><script>import bus from './eventBus.js'export default {    data(){        return{            msg:'故人西辞黄鹤楼'        }    },    methods:{        send(){            bus.$emit('share',this.msg)        }    }}</script>

数据接收方

<template>    <h2>{{fromsendMsg}}</h2></template><script>import bus from './eventBus.js'export default {    data(){        return{            fromsendMsg:''        }    },    created(){        bus.$on('share',val=>{            this.fromsendMsg=val;        })    }}</script>