父子组件之间的通讯

明确关系:

父: 引用者

子: 被引用者

什么时候用到父=>子传值

需要把一个组件里值传到另一个组件进行渲染时候

父向子传值

1.子组件内, props定义变量,

2.在子组件使用变量在子组件中定义好props变量(子组件全局下),用于接受父组件的数据

3.父组件内, 使用子组件, 通过属性方式给props变量传值

---

子组件:

<template>
   <div class="my-product">
    <h3>
        {title}}
    </h3>
    <p>
        {{price}}	
    </p>
    <p>
        {{info}}	
    </p>
	</div>
</template>

export default{
    //定义变量进行接收
    props:['title','price','info']/{}
}

---

父组件:

<template>	
	<div>
        <MyProduct 
                   :title='title'
                   :price='24'
                   :info='msg'>
        </MyProduct>
    </div>
</template>

import MyProduct form './components/MyProduct.vue'
export default {
    components:{
        MyProduct,
    },
    data(){
        return {
            title:"免费吃",
            msg:"限制2小时",
            price:500,
        }
    }
}

---

单项数据流:

父组件数据流向子组件的数据,在子组件不能修改(如果修改了,父组件不知道)

流向,叫单项数据流.

不能直接对Props中的数据进行赋值,通常用数组进行存储,数组是引用数据类型是个对象,

修改内部的属性不会影响单项数据流的保护

JS不能操作堆内存.引用数据类型指向外部的对象

子组件修改,不通知父级,造成数据的不一致

---

子向父传值

父组件: 给子组件绑定一个自定义事件用于接收到子组件传过来的值，并把他赋值给data缓存里，渲染到页面上

第一步:

@自定义事件名 baba="父组件methods的函数名随意起 //fn"

import son from './components/son.vue'
export default {
    component: {
    son,    
    }
	mothods:{
    //接受子组件的值
    fn(index,price){  
    			}
		}
}

---

子组件: 通过$emit触发自定义事件 第一个是自定义事件名，第二个是要传递的值。

<button @click="baba">
    
</button>

export default {
    //不可直接修改props中的数据,因为Vue中props是单项数据流
    props:{}/[],  
    baba(){	//点击btn触发$emit传递给父组件(baba),子组件需要传递的值(可变参数)				
        this.$emit('父组件里的自定义事件名 baba , this.index,1)
    }
}

---

---

任意组件传值？

任意组件传值通过中央事件总线$bus

前置条件：AA组件叫A组件，BB组件叫B组件，虽然这里是兄弟关系，其实A组件和B组件之间没有任何关系也可以用这种方式。

定义中央事件总线，挂载到vue实例上。

V-model的本质

<addBtn :value="count" @input"val => count = val"></addBtn>

1. 给value属性复制
2. 接受input事件,把值赋值给变量
3. 子组件里就要用props+value接受使用
4. 子组件触发input事件传值

所以用v-model 也可以给组件实现双向数据绑定

A组件如何发送？

通过this.$bus.$emit发送