vue2.x 组件之间传值

---

前言

vue组件之间传值的意义，是为了更好的达到组件复用。写更少的代码，实现页面更简洁、更高效、更复用。

---

一、父传子

1.父组件传值给子组件

1.父组件传值

<banner  :img="img" />
data(){
    return {img:"./xxxxx/xxxxxx.jpg"}
}

这个是通过父组件用自定义属性传值的方式，把内容传给子组件。不过子组件那边是要进行接受的。

2.子组件接收

接收分为三种。第一种是接收，第二种是校验，第三种是可以添加默认值

1.接收

export default {
    data(){},
    props:["img"] // 普通接收
}

2.校验。

校验方法，是可以校验父组件传过来的数据类型的

export default {
    data(){},
    props:{
        "img":type //notice:此处的type指的是数据类型,如string,number等
    }
}

注意点：传过来的函数的话，校验的是Function。如fun:Function

3.添加默认值

这个是可以定义（检验）数据类型和默认值

export default {
    data(){},
    props:{
        "img":type //notice:此处的type指的是数据类型,如string,number等,
        "default" :function(){return './aaaaa/cccccc.jpg'}
    }
}

另外一个可以优化的地方，如果父组件传给子组件的参数比较多时，可以以一个对象的方式统一传过去。以对象行为传的话，会更加灵活一点。子组件接收，也还是一样的方式进行接收。

<banner  :obj="obj" />
data(){
   return {
       obj：{img:"./xxxxx/xxxxx.jpg",alt:"当前显示的是某个照片"}
   }
}

子组件那边进行接收的方法：

props:{
    obj:{
        img:String, // 可以对传过来的对象进行单读的设定
        alt:String  // 也可以进行默认值校验
    }
}

4.总结

总结：父子组件之间传值，如果父组件只是传纯文本给子组件，可以不用在属性之前加冒号。如果父组件要传入一个变量的内容给子组件，子组件就得要以父组件所传的属性名字作为校验名字。另外不管是哪一种情况，都得要进行数据校验

2.父组件操作子组件

父组件操作子组件的方式，是通过$ref的方式来进行操作的。
ref被用来给DOM元素注册引用信息，引用信息会根据父组件的$refs对象进行注册。如果在普通DOM元素上使用，引用信息是元素，如果在子组件上，引用信息就是组件实例。

当前是index.vue父组件
<banner ref="bannerCom"/>

methods:{
    xxxx:function(){console.log(this.$refs.bannerCom.xxxxx)}
}

当前是banner.vue子组件

export dafault{
    data(){
        return {
            xxxxx:"这是子组件的一段文本"
        }
    }
}

这个操作同样也是可以获得子组件里面的方法的。

二、子传父

1.子组件传值给父组件

vm.$emit(event,arg1,arg2);$emit可以实现子组件向父组件通信

当前是btn.vue子组件页面
<template>
    <buton @click="send"></button>
</template>

mothods:{
    send:funciton(){
        this.$emit("e-child","子组件传给父组件的值")
    }
}

2.父组件接收子组件的值

当前是index.vue父组件

<btn :e-child="get"/>
methods:{
    get:(value)=>{console.log(value)}; // 参数value就是子组件传给父组件的值
}

2.子组件操作父组件

这个方法的实质就是父组件传值给子组件的时候，把父组件的函数传给子组件。子组件再发射回来，这样子就形成了子组件操作父组件。流程顺序是：
1.父组件把函数以参数的形式传给子组件 → 2.子组件那边接收 → 3.子组件通过事件把函数发射回父组件 → 4.父组件通过自定义事件操作传回来的函数。

当前是index.vue父组件

<btn :event="changeNumber" @e-child="get"/>
methods:{
    changeNumber:function(){
        this.number++;
    },
    get:function(value){
        value();
    }
}

下面是子组件代码

当前是btn.vue子组件

<template>
    <button @click="send"></button>
</template>
props:{
    event:{type:Function}
},
methods:{
    send:function{
        this.$emit("e-child",this.event);
    }
}

三、兄弟组件之间传值

现有场景需求：btnA.vue和ipt.vue两个子组件，点击btnA组件按钮的时候，获得到input组件的值。场景的开发本质就是子组件把内容先传给父组件，父组件再传给另外一个子组件。流程是：
1.子组件通过$emit发射形式传给父组件 → 2.父组件那边接收 → 3.父组件以参数的形式把内容传给另外一个子组件 → 4.另外一个子组件接收。

当前是ipt.vue子组件

<template>
    <input v-model="value" @blur="send" />
</template>
data(){
    return {value:""}
},
methods:{
    send:function(){
        this.$emit("e-child",this.value)
    }
}

当前是index.vue父组件

<ipt @e-child="get" />
<btn :msg="iptValue"/>

data(){
    return {
        iptValue:value
    }
},
methods:{
    get:function(value){
        this.iptValue = value;
    }
}

当前是btn.vue子组件

<template>
    <button @click="logText"></button>
</template>
props:{
    msg:{type:String}
},
methods:{
    logText:function(){
        console.log(this.msg)
    }
}

四、其他关系组件之间传值

组件关系越来越复杂的时候，就不建议通过传值或者发射的形式来传递内容了，这么做只会越来越混乱。为了解决这个问题，只能用vuex

---