Vue 组件之间传值

一、父子通讯

1）props 配置项       父传子(数值)，子传父(方法)  

父组件：通过对（子组件实例）的属性传递值。

子组件：通过props接收。

<!-- 【父传递】 在父组件中，对子组件对象的属性传值 或 传方法 -->
<Student name="wangming" :age="15" :fn1='fn1'></Student>

//【子组件接受】注意props接受尽量不要修改，可以赋值data再修改
export default {
    //方式一：只接收
    props:['name','age','sex']  
    
    //方式二：接收 + 类型指定
    props:{name:String,age:Number,sex:String}

    //方式三：接收 + 类型指定 + 必要性限制
    props:{
        name:{tpye:String,require:true},//类型 , 必须传
        age:{type:Number,defaultP:99},//类型 , 默认值
        gender:{type:String,require:true}   
    }
}

2）v-on: 或 @ 或 ref      子传父(自定义事件)  

子组件创建实例对象时（绑定）自定义事件，子组件触发。但触发该事件，所执行的函数在父组件中。

<!-- 绑定：自定义事件 -->

--------------------------------------------------------------------------------

<!-- 第一种写法 -->

<!-- v-on的作用是：将eve这事件添加在School的实例对象上，所以school组件才能$emit调用 -->
<School v-on:eve="fn1"></School>

<!-- v-on简写，once仅一次性 -->
<School @eve.once="fn1"></School>

--------------------------------------------------------------------------------


<!-- 第二种写法 -->

<School ref='sch'></School>

//挂载时，获取并在组件DOM上添加eve事件，该事件执行fn1回调
mounted(){this.$ref.sch.$on('eve',fn1) }

//触发：自定义事件 
isClick(){
    this.$emit("eve",this.name,666,888)}

//触发事件后，执行函数（在父组件中）
fn1(w){...;},

// 解绑事件，子组件中普通事件触发后，

unbing(){
    this.$off('eve');          // 解绑一个自定义事件
    this.$off(['eve1','eve2']);// 解绑多个自定义事件
    this.$off();               // 解绑所有的~
}

二、任意组件间通信

1）全局事件总线       $bus  

         未完待续...

2）消息订阅与发布       pubsub插件  ​​​​​​​

         未完待续...

3）共享数据 Vuex       $store  

    即：将数据存储在原型链中的$store中，任意组件均可用。vuex使用教程查看Vuex 模块化开发，更好维护__yuroll的博客-优快云博客