组件通讯的方式有哪些

• 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