VUE组件间通信

1.组件传值（通信）方式

1）父传子

a.父通过数据绑定，props接收（父传子简单。但是传给孙要再传一次；子组件不能修改父组件数据）

b.子组件直接使用父组件的数据（this.$parent.xxx,子组件可以修改父组件的数据；this.$parent.$parent.xxx....太长了不推荐）

c.依赖注入：父组件可以直接向某个后代传值,同级不行

2）子传父

a.子组件事件触发：this.$emit(事件名字,传值) 父组件 ：标签里面 @事件名字或者this.$on(事件名字,val=>{}) 不要放到create或者mounted里面，不会执行

b.

<List ref='child'></List>  

this.$refs.child.xxx = ' yyy'

c.this.$children[下标]赋值给data(繁琐不推荐)

3）平辈

a.bus.js :

import Vue from 'vue'; 
export default new Vue();

import导入页面中，通过bus.xxx传值

2.子组件如何直接修改父组件的值

子组件可以通过this.$parent.xxx修改

3.父组件如何直接修改子组件的值

ref与$ref

4.依赖注入

父组件

provide(){
 return {
    val:'123'
   }
}

子组件

export default{
 inject:[val]
}

5.如何找到根组件

this.$root

在App.vue 可以用 this.$parent.$el

6.slot 插槽

1）匿名插槽：没有名字

<slot></slot>

2) 具名插槽：有名字

<slot name="xxx"></slot> 组件内部<template #xxx></template>

3）作用域插槽：

传值

<slot name="xxx" :yyy="hh"></slot> 组件内部<template #xxx=yyy></template>

传多个值

    <slot name="xxx" :yyy="{hh,iii}"></slot> 
组件内部<template #xxx={yyy}></template> 
解构