组件之间的通信

通过props实现父组件向子组件传值

父组件想要将值传给子组件，只需要在子组件对应的标签中通过v-bind绑定一个自定义的属性，然后将要传的值给这个属性，例如 :selectFoods="selectFoods" 

然后子组件通过props可以接收父组件传来的值

例：

<template>
    <div>
        <Shopcar :selectFoods="selectFoods" :deliveryPrice="deliveryPrice"
                     :minPrice="minPrice"></Shopcar>
    </div>
</template>

<script>
    import Shopcar from 'shopcar';


    export default {
        data() {
            return {
                selectFoods: "fdfds",
                deliveryPrice: 100,
                minPrice: 10,
            };
        },
        components: {
            Shopcar,
        },
    }
</script>

<template>
    <!-- 直接使用props里面的属性即可 -->
    <div v-text="selectFood">

    </div>
</template>

<script>
    export default {
        props: {
            "selectFood": {
                type: String,
                default: "",
            },
            "deliveryPrice": {
                type: Number,
                default: 0,
            },
            "minPrice": {
                type: Number,
                default: 0,
            },
        },
    }
</script>

自定义事件实现子组件向父组件传值

绑定事件(在父组件中绑定)

使用v-on绑定

<ToHeader @addTodo=”addTodos”>

• addTodo：事件监听的名字
• addTodos：事件监听的回调函数，在methods中定义

使用$on绑定

<ToHeader ref=”header” />
this.$refs.header.$on('addTodo', this.addTodos);

• addTodo：自定义事件名
• addTodos：监听的回调函数，在父组件的methods中定义

触发事件(在子组件中触发)

this.$emit('addTodo', args);

触发事件后，会在<ToHeader />中触发回调函数addTodos(),回调函数在父组件的methods中定义，从而将args参数值传递给了父组件

消息订阅与发布(PubSubJS库)

使用消息订阅需要导入相应的库，首先需要安装，这里使用npm安装

npm install pubsub-js --save

订阅消息

import PubSub from 'pubsub-js';

// 参数说明：消息名， 回调函数(msg是消息名， data为发布消息时传递的参数)
PubSub.subscribe("deleteTodo", function(msg, data) {
    // 操作
});

这个回调函数是发布消息后去触发的

发布消息

import PubSub from 'pubsub-js';

// 参数名：消息名， 传递的参数
PubSub.publish('deleteTodo', data);　　

发布消息后会触发订阅消息的回调函数去执行

slot(插槽)

组件间通信的第四种方式就是使用插槽，这种方式不仅像上面那样传递参数，甚至能够传递HTML标签，即 '标签数据'

子组件

书写占位

<template>
    <div>
        <slot name="xxx">占位1</slot>
        <div></div>
        <slot name="yyy">占位2</slot>
    </div>
</template>

父组件

<Shopcar>
    <div slot="xxx">对应的标签结构</div>
    <div slot="yyy">对应的标签结构</div>
</Shopcar>