vue组件通信

组件间通信基本原则

- 不要在子组件中直接修改父组件的状态数据
- 数据在哪, 更新数据的行为(函数)就应该定义在哪

vue 组件间通信方式

• props
• vue 的自定义事件
• 先子传父，再父传子()
• slot

** props**

• 此方式用于父组件向子组件传递数据
• 可以设置默认类型，必要性，默认值
• 定义声明所有，指定名称，指定名称和类型

<Son v-bind:money ='money'></Son>  父组件
Vue.component('Son',{   子组件
        template:'#son',
        props:['money'] 

 1. 数据以单向数据绑定的形式，绑定在子组件身上
 2. 兄弟组件间也不能直接 props 通信, 必须借助父组件才可以
 3. 如果需要向非子后代传递数据必须多层逐层传递

vue自定义事件

<Son @give='gethongbao'></Son>
methods: {
            gethongbao(val1) {
                this.money = val1 父组件

<button @click="giveFather"> give </button>
methods: {
            giveFather() {
                this.$emit('give', this.val) 子组件

 1. 在父组件的模板中，通过事件绑定的形式，绑定一个自定义事件在子组件身上
 2. 子组件可以使用 $emit 触发父组件的自定义事件。

先子传父，再父传子 (props和vue 的自定义事件的结合使用)

兄弟组件通信

export const Bus = new Vue()  main.js定义一个新的Bus对象

import { Bus } from '../main'  a引入Bus
Bus.$emit('send', this.num)  传递参数

import { Bus } from '../main'  b引入Bus
Bus.$on('send', val => {  接收参数
this.msg = val)}  
1.父组件中引入a,b组件,点击a按钮直接传递参数到b:

slot

作用域插槽：当我们想在父组件中访问子组件内部的一些数据时，就需要在子组件内部的元素上动态绑定一个自定义属性，将数据传递到自定义属性上，通过slot传递给父组件使用。

<slot :teacher="teacher"></slot> 子
<template slot-scope="prop">   </template> 父