组件通讯的方式有哪些

2022-06-25 16:37:38 阅读：153 来源： 互联网

标签：通讯哪些 default bus MovieItem export 组件 emit

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>

标签：通讯,哪些,default,bus,MovieItem,export,组件,emit
来源： https://www.cnblogs.com/zhanghaoqing/p/16411864.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

组件通讯的方式有哪些

props传递数据

自定义事件及$emit方法

事件总线

步骤：