组件通讯的方式有哪些

  • 组件通讯的方式有哪些已关闭评论
  • 30 次浏览
  • A+
所属分类:Web前端
摘要

步骤:首先,在子组件中声明props选项 其次,在子组件中使用v-bind指令动态绑定属性,通过插值表达式动态获取数据

  • 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>