Vue组件间传参（1）---父子

 一、父组件向子组件传递数据

1、在子组件中使用props声明需要从父组件接收到的数据（props和methods、watch等同级）

       两种方式：

        方式一：字符串数组，每一项都是父组件传递的名称

                例：props:['name','list']

                父组件引用的子组件：<子组件 :list = " 父组件组件中的变量 "><子组件>

        方式二：对象，可以控制传递数据时的类型、设置默认值、进行数据校验，当需要传递的值的类型是数组或对象时，默认值必须使用default(){return 数组/对象}

 2、验证都支持哪些数据？

        String、Number、Boolean、Array、Object、Date、Function、Symbol

        当我们有自定义的构造函数时，验证也支持自定义的类型

Vue.component('my-component',{
    props:{
        // 基础类型
        prop1:Number,
        // 多种
        prop2:[String,Number],
        // 必填
        prop3:{
            type:String,
            required:true
        },
        // 设置默认值
        prop4:{
            type:Number,
            default:10
        },
        // 对象默认值
        prop5:{
            type：Object,
            default:function(){
                return {log:"只是一段信息"}
            }
        },
        // 自定义验证
        prop6:{
            validator:function(value){
                return ["one","two","three"].indexOf(value)!==-1
            }
        }
    }

})

二、仅用于显示的数据

1、子组件中定义插槽，并设置name

        <子组件>

                <slot name="task"></slot>

        </子组件> 

2、父组件中

        <template slot="task">{{task}}</template>

这里仅是简述一下插槽的基本用法，详细使用请查看博客：Vue组件间传参---插槽分发

三、子组件向父组件传递数据

1、父组件在引用的子组件上添加一个自定义事件，并绑定父组件methods中的一个方法

<父组件>
    <子组件 @父组件自定义事件 = “父组件methods中的方法”></子组件>
</父组件>

父组件： 

<div>
    <siteDetail @getData="getData" v-if="dialogVisible" ref="siteDetail" :companyOptions="companyOptions" :dialogVisible.sync="dialogVisible"></siteDetail>
</div>

 2、子组件通过$emit( '父组件自定义事件' ，要传给父的参数 )来触发父组件中的自定义事件

<子组件>

    <某元素 @click = "方法名"></某元素>

</子组件>

methods: {

    方法名(){

        this.$emit( '父组件自定义事件' )

    }

}

子组件： 

<template>
    <div>
        <button @click="onClick"></button>
    </div>
</template>
export default {
  props: {
    companyOptions: {
      type: Array,
      default: []
    },
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
}
methods:{
    onClick{
        this.$emit('getData');
    }

}

四、兄弟组件传参（EventBus）

1）在main.js同级目录创建bus.js 只写： import Vue from 'vue' export default new Vue();

（2）在main.js中引入bus，并放到Vue的原型对象中，让所有组件都可使用

Vue.prototype.bus=bus;

（3）在数据接收者的created中 this.bus.$on("自定义事件名",this.自己的函数.bind(this))

（4）在数据的发送者中的方法写 this.bus.$emit("自定义事件名",要传递的数据)

结果：传递的数据会自动进入到接受者自己的函数中 

注意：在使用$on的页面，如果你没有keep-alive，那么你应该再beforeDestory中移除此监听事件，否则，进入一次该页面，监听事件将会再次重复监听一次，this.bus.$off('事件名')。