VUE父子组件间通信

1.通过属性props进行值传递，即可传递基本类型又可以传递Object，包括function

　　父组件

<template>
    <div id="detail">
        //加sync为双向绑定
        <header-component :child.sync="parent" :childfun="parentFun"></header-component>
        </div>
</template>
<script>
   export default {
       data(){
           return {
               parent:1222
           }
       },
       methods:{
          parentFun(val){
             console.log(val)
          }

       }
   }
</script>

      子组件header-component

<template>
    <div @click="childfun(2222)">
          {{child}} 
     </div>
</template>
<script>
   export default {
       props:['child','childfun'], 
       ready(){ 
           console.log(this.child)//1222  
       } 
   } 
</script>

2.父组件访问子组件methods和events(三种方法)

//父组件 
<template>
    <div id="detail">
        //加sync为双向绑定
        <header-component  v-ref:child></header-component>
        </div>
</template>
<script>
   export default {
       data(){
           return {
               parent:1222
           }
       },
       ready(){
           this.$refs.child.childfun(this.parent);
           this.$broadcast('childEvent',this.parent);
           //this.$refs.child.$emit('childEvent',this.parent);
       }
   } 
</script>

//子组件

<template>
    <div> 
     </div>
</template>
<script>
   export default {
       methods:{
          childfun(val){
              conosle.log(val);
         }
       },
       events:{
         childEvent(val){
              conosle.log(val)
         }
      }

   } 
</script>

3.子组件访问父组件method和events（三种方法）

    <div id="detail">
        //加sync为双向绑定
        <header-component  @on-tap="parentFun" :childfun_1="parentFun_1"></header-component>
        </div>
</template>
<script>
   export default {
       data(){
           return {
               parent:1222
           }
       },
       methods:{
          parentFun(val){
              conosle.log(val)
          },
          parentFun_1(val){
            conosle.log(val)
         }
       },
       events:{
         parentEvent(val){
             console.log(val)
         }
       }
   } 
</script>

//子组件
<template>
   <div>
       <p @click="$emit('on-tap',1222)"></p>
       <p @click="chillfun"></p>
       <p @click="childfun_1(123)"></p>
   </div>
</template>
<script>
   export default {
       props:['cildfun_1'],
       methods:{
          childfun(){
             this.$dispatch('parentEvent',123);
         }
       }
   } 
</script>