vue组件之间的通信

一、props/$emit  缺点：不能兄弟之间通信

父组价通过props向子组件传递消息。

父组件
<template>
    <div class="parent" >
      <child-ren   title="mymymessage"></child-ren>
    </div>
</template>

<script>
import childRen from '@/components/child'
export default {
    data() {
      return {
        mymessage: 'hello'
      }
    },
components:{ childRen }
 
}
</script>
子组件
<template>
    <div class="child">{{title}}</div>
</template>

<script>
 export default{
    name:'parent',
    props:{
         title:[Numbet, String]
    }
}
</script>

子组件通过$emit向父组件传递（通过事件传递）

子组件
<template>
    <div class="">
      <div @click="changeText">Hi好</div>
    </div>
</template>
<script>
export default {
    methods: {
      changeText(){
          this.$emit("TextChange","子组件向父组件传值")
      }
    }
}
</script>

父组件：
<template>
    <div class="">
      <p>{{message}}</p>
        <child-ren  @TextChange="updateText($event)"></child-ren>
    </div>
</template>

<script>
import childRen from '@/components/child'
export default {
    components:{
        childRen
    },
    data() {
        return {
          message: ''
        }
    },
    methods: {
      updateText(e){
          this.message = e;
      }
    },
}
</script>

二、$paren/$child :parent是父组件的实例对象，child是当前实例直接子组件的实例。缺点：无法跨级或兄弟之间通信

父组件
<template>
    <div class="">
      <p>{{message}}</p>
        <button @click="changeChildValue">test</button>
        <child-ren></child-ren>
    </div>
</template>

<script>
import childRen from '@/components/child'
export default {
    components:{
        childRen
    },
    data() {
        return {
          message: ''
        }
    },
    methods: {
      changeChildValue(){
        this.$children[0].mymessage = 'hello child';
      },
    },
}
</script>
子组件
<template>
    <div class="">
      <input type="text" v-model="mymessage" @change="changeValue"  />
    </div>
</template>

<script>
export default {
    data() {
      return {
        mymessage: this.$parent.message
      }
    },
    methods: {
      changeValue(){
        this.$parent.message = this.mymessage;//通过如此调用可以改变父组件的值
        console.log(this.$parent.message)
      },
   
    }
}
</script>
>