vue学习笔记-组件间通信

组件的优势：便于维护，提高开发效率，可复用，便于协同开发，便于调试。
组件间的通信

1. 父子间通信

• 子传父

  //子组件（HelloWorld）派发
this.$emit('msg','你好，中国'）

<!--父组件监听-->
<hello-world @msg="msgEvent">

//父组件
methods:{
  msgEvent(val){
    console.log(val) //你好，中国
  }
}

• 父传子

<!--父组件中-->
<hello-world msg="你好，中国">

//子组件中
export default{
  //props:['msg'],
  props:{
    msg:{
      type:string,
      require:true 
    }
  },
  mounted(){
    console.log(this.msg)//你好，中国
  }
}

2.兄弟间传递

• $parent
• $root
  两者都是实现访问父组件的属性和方法，两者的区别在于，如果存在多级子组件，通过parent访问得到的是最近以及的父组件，通过root 访问得到的是根父组件

//组件helloWorld
this.$parent.$emit('foo','this is from brother')
//this.$root.$emit('foo','this is from brother')

//组件helloWorld2
this.$parent.$on('foo',msg=>{
  console.log(msg)//this is from brother
})
//this.$root.$on('foo',msg=>{
//  console.log(msg)//this is from brother
//})

3. $children 查找当前组件的直接子组件，可以遍历全部子组件， 需要注意 并不保证顺序，也不是响应式的

this.$children[0].xxx = '000'

4. provide inject跨组件传值

 provide(){
   return {
     msg:'123'
   }
 }
//descendant
inject:['msg']

5. $attrs:继承所有的父组件属性，在子组件展开父元素中，未被props的属性（出class，style）

<!--父组件-->
<hello-world placeholder="你好，中国" />
<!--子组件-->
<input v-on="$attrs" >

6.$listener事件：当前组件监听的事件，通俗的讲也就是在使用组件的时候在标签中定义的事件，如@click，以及一些自定义事件@demo等

//父组件
<hello @click="clickMe">
methods:{
  clickMe:function(){
    console.log('你好')
  }
}
//子组件
<button v-on="$listener">点击</button>
//你好

7. refs 获取子节点引用

<!--父组件-->
<hello />
<hello ref="hello01">

mounted(){
  this.$refs.hello01.xx = '000'
}