Vue组件通信

前言

vue组件通信方式就是数据的传递，根据组件的传递可以分为

父组件传递数据给子组件 父👉子

子组件传递数据给父组件 父👈子

除父子相传的任意组件传递数据，根据这个三种情况下面的方法就有了应用场景

第一种 props 父子通信

传递数据类型：
1:可能是函数 -----------实质子组件想给父亲传递数据

2:可能不是函数-----------实质就是父亲给子组件传递数据
父组件传递数据：

<template>
  <div>
    <ikun AKA="鸡你太美"/>
  </div>
</template>

子组件接收

<script>
export default {
    name:'ikun',
    props:['AKA']
}
</script>

props接受的参数不能修改，虽然有些情况能修改但不建议

特殊情况：路由传递props
1:布尔值类型，把路由中params参数映射为组件props数据
2:对象，静态数据，很少用
3:函数，可以把路由中params|query参数映射为组件props数据

第二种 自定义事件 $emit,$on 子传父

父组件绑定自定义事件

<template>
  <div>         jinitaimei是回调函数答应一个传递回来的参数        
    <ikun @AKA="jinitaimei"/> 
  </div>
</template>

<script>
import ikun from './ikun'
export default {
    methods: {
        jinitaimei(a){
            console.log(a);
        }
    },
}
</script>

子组件触发自定义事件

<template>
  <div>
    <button @click="$emit('AKA','鸡你太美')">触发自定义事件</button>
  </div>
</template>

注意
组件绑定原生DOM事件，并非原生DOM事件，而是所谓的自定义事件。
如果你想把自定义事件变为原生DOM事件，需要加上修饰符.native修饰
这个修饰符，可以把自定义事件【名字：原生DOM类型的】变为原生DOM事件，

<ikun @click.native="1+1" />

第三种 插槽 slot 父子通信

默认插槽
具名插槽
作用域插槽:子组件的数据来源于父组件，但是子组件的自己的结构有父亲决定。

第四种 全局事件总线 $bus

在vue原型上绑定vue实例

第五种 消息订阅与发布

pubsub-js【发布订阅消息】*****在vue中根本不用【React】 ----万能

第六种 Vuex

第七种 v-model父子数据同步

v-model：指令，可以收集表单数据【text、radio、checkbox、range】等等
切记：v-model收集checkbox需要用数组收集

v-model:实现原理 :value @input 还可以实现父子数据同步。
父组件：

<template>
  <div>
    父组件input：
    <input v-model="age" type="text">                     
    <!-- <ikun :value="age" @input="age = $event" />  -->
    在组件中使用 v-model 原理类似👆
    <ikun v-model="age"/>
  </div>
</template>

子组件

<template>
  <div>
    子组件input，他的年龄是:
    <input :value="value" @input="$emit('input',$event.target.value)" type="text">
  </div>
</template>

第八种 属性修饰符.sync，父子数据同步。

父组件

<template>
  <div>
    他的年龄{{age}}
    <!-- <ikun :age="age" @update:age="age = $event" /> -->
    原理类似👆，添加sync修饰符相当于在组件内添加了一个自定义事件@update:age="age = $event"
    <ikun :age.sync="age" />
  </div>
</template>

子组件

<template>
  <div>
    <button @click="$emit('update:age',age-1)">年龄-1</button>
  </div>
</template>

第九种 $attrs与$listeners

$attrs：组件实例的属性，可以获取到父亲传递的props数据（前提子组件没有通过props接受）

<h1 v-bind="$attrs" > 给h1和添加所有属性

$listeners：组件实例的属性，可以获取到父亲传递自定义事件（对象形式呈现）

<h1 v-on="$listeners" > 给h1添加绑定所有事件

第十种 $children与$parent

ref:可以在父组件内部获取子组件—实现父子通信
$children:可以在父组件内部获取全部的子组件【返回数组】
$parent:可以在子组件内部获取唯一的父组件【返回组件实例】