Vue父子、兄弟组件通信

1.父组件向子组件传参数

• 父组件代码

<template>
  <div>
    <input type="text" v-model="inpMessage">
    <button @click="handleClick">点击传给子组件</button>
     // message为子组件props接收的值，clickData为父组件要传的值
     // children标签就是子组件
    <children :message="clickData" /> 
  </div>
</template>
 
<script>
  //引入子组件
  import children from './page/children'
  
  export default {
    components:{
      children
    },
    data(){
      return{
        inpMessage:'',
        clickData:''
      }
    },
    methods:{
      handleClick(){
        //赋值
        this.clickData = this.inpMessage
      },
    }
  }
</script>
 
<style></style>

• 子组件代码1【点击事件传值】

<template>
    <div>
      <input type="text" v-model="childrenMessage">
      <p>{{childrenMessage}}<p>
    </div>
</template>
 
<script>
    export default {
      props:{
     	 // 接收父组件传过来的值，这是稍微高级一点的写法，也可以props:[' message'] 
     	 // type 类型有： String Number Boolean Function Object Array Symbol
          message:String  
      },
      data(){
          return{
            childrenMessage:''
          }
      },
      created(){
        this.childrenMessage = this.message  //初始化时候的赋值
      },
    }
</script>
 
<style scoped>
 
</style>

参考资料：Vue组件属性Props

• 子组件代码2【动态监听传值】

<template>
    <div>
      <input type="text" v-model="childrenMessage">
    </div>
</template>
 
<script>
    export default {
      props:{
          message:String
      },
      data(){
          return{
            childrenMessage:''
          }
      },
      created(){
        this.childrenMessage=this.message
      },
      //这里用watch方法来监听父组件传过来的值，来实现实时更新
      watch:{
        message(val){    //message即为父组件的值，val参数为值
          this.childrenMessage = val    //将父组件的值赋给childrenMessage 子组件的值
        }
      }
 
    }
</script>
 
<style scoped>
 
</style>

动态监听传值法有点需要注意的是， 必须要父组件对应变量有变化才会有响应。
假设子组件变量childrenMessage变化后没有回传父组件，父组件还是set回原来的值，这里是不会被监听到。
例如：当父组件的clickData = 0 传到子组件使得 childrenMessage = 0，然后子组件通过某种方式使得 childrenMessage = 1。然后，没有把childrenMessage = 1 回传给父组件的clickData属性时，即时父组件再次更改clickData = 0。 这样message(val)是无法监听到的。

所以接下来，我们来讲一下子组件如何改变父组件的值

2.子组件向父组件传参数

vue是不允许子组件向父组件传值去改变父组件的值的，但是我们可以通过自定义事件的形式去改变值，例如点击事件，再通过$emit来传递。

• 父组件代码

<template>
  <div>
    <input type="text" v-model="inpMessage">
    <button @click="handleClick">点击传给子组件</button>
      //@messageData为子组件声明传递过来的值，函数，getData为函数，val参数是传递过来的值
    <children :message="clickData" @messageData="getData"/>
  </div>
</template>
 
<script>
  import children from './page/children'
  export default {
    components:{
      children
    },
    data(){
      return{
        inpMessage:'',
        clickData:''
      }
    },
    methods:{
      handleClick(){
        this.clickData = this.inpMessage
      },
       //接收子组件传递的值，val参数是传递过来的值 ，给inpMessage 赋值，子组件改变父组件的值
      getData(val){
        this.inpMessage = val
        console.log(val)
      }
    }
  }
</script>
 
<style></style>

• 子组件代码

<template>
    <div>
      <input type="text" v-model="childrenMessage">
      <button @click="childClick">传值给父组件</button>
    </div>
</template>
 
<script>
    export default {
      props:{
          message:String
      },
      data(){
          return{
            childrenMessage:''
          }
      },
      created(){
        this.childrenMessage=this.message
      },
      methods:{
        //点击传值给父组件，通过$emit传递，第一个参数messageData相当于传播的媒介，this.childrenMessage为需要传递的值，后面也可以传递多个参数
        childClick(){
          this.$emit('messageData',this.childrenMessage)
          console.log(this.childrenMessage)
        }
      },
      watch:{
        message(val){
          this.childrenMessage = val
        }
      }
 
    }
</script>

3.父组件调用子组件的js函数

• 父组件代码

<template>
    <div>
        <h1>我是父组件</h1>
        <child ref="child"></child>
    </div>
</template>
<script>
    import child from './child'
    export default{
        components:{ child },
        methods:{
            parent(){
                this.$refs.child.childFn()
            }
        }
    }
</script>

• 子组件代码

<template>
    <div>
       <h2>我是子组件</h2>
    </div>
</template>
<script>
    import child from './child'
    export default{
        components:{ child },
        methods:{
            childFn(){
                alert('父组件调用了我')
            }
        }
    }
</script>

4.兄弟组件相互传参

同级（兄弟）组件间不能直接传递数据，需要建立一个类似桥梁的载体去实现。

1. 定义一个公共文件public.js，创建位置工程src目录下与main.js同级（代码内容是创建一个空的vue实例）：

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

2. 创建好以后，同级（兄弟）组件分别引入public.js这个文件：

   import Public from '../public.js'
   

3. 例如现在有A.vue和B.vue两个同级（兄弟）组件，假设A.vue组件发送数据，通过$emit将事件和参数’传递’给B.vue（实际上是传递数据到public.js内）：

   price(newPrice){
   	const obj = {
   		a: "test",
   		b:"ass"
   	}
       Public.$emit('xx',obj)		//xx:定义传参，obj：所要传递的数据 
   } 
   

4. 在B.vue组件里接收数据，通过$on将事件和数据从A.vue接收过来：

   //该代码可以写在mounted()方法里面
   Public.$on("xx", val=> {
       this.插值语句中需要渲染的变量名 = val
   });