vue最新面试题（组件通信）

组件通信
父子通信
子父通信
兄弟通信

父传子
主要是通过props来实现的 ，父组件需要通过import引入子组件，并注册，
在子组件里面添加要传递的属性，子组件用props来接收，接收的方式有两种，一种是用对象的形式{}来接收，对象的形式可以传递数据的类型，和必填，另一种是用数据的形式[],数组只是简单的接收值， 下面是代码

父组件

<template>
  <div class="shop">
    <!-- 购买的商品 -->
    <div class="shop_section">
    //子组件标签
      <ShopCar :toChildCheck="checkAll" ></ShopCar>
    </div>
  </div>
</template>
<script>
//引入子组件
import ShopCar from "../index/components/ShopCar"
export default { 
  components:{
  //声明子组件
    ShopCar
  },
  data(){
		    return {
		      checkAll:true,
		      prices:"",
		    }
	  },
  }
 </script>

子组件

<template>
  <div class="shop">
    <div class="shop_section">{{toChildCheck}} </div>
  </div>
</template>
<script>
export default { 
	  //与data 同级  用数组的形式接收值
	  props:["toChildCheck"],
	  //用对象的形式接收值
	   props: {
		    toChildCheck: {
		    //还可以设置必填 
			      type: String, //值的类型
			      default: 'hello world' //默认值  
			      required:true,
			    }
			  }
  }
 </script>

子传父
子组件

<template>
  <div class="shop">
    <div class="shop_section">{{toChildCheck}} </div>
    <button @click="sendDataToFather()">发送到父组件</button>
  </div>
</template>
<script>
export default { 
	data(){
		return {
				shopPrice:" ",
		}
	},
	methods:{
		sendDataToFather(){
			this.$emit("tofather",this.shopPrice);
		}
	}	
  }
 </script>

父组件

<template>
  <div class="shop">
    <!-- 购买的商品 -->
    <div class="shop_section">
    //子组件标签     @所绑定的事件是子组件中用$emit传来的第一个参数
     <ShopCar  @tofather="getMessage"></ShopCar>
    </div>
  </div>
</template>
<script>
//引入子组件
import ShopCar from "../index/components/ShopCar"
export default { 
  components:{
  //声明子组件
    ShopCar
  },
  data(){
		    return {
		      checkAll:true,
		      prices:"",
		    }
	  },
	  methods:{
	  		getMessage(message){
			      // console.log("父级",message)
			    },
	  }
  }
 </script>

兄弟传值
1.兄弟之间传递数据需要借助于事件车，通过事件车的方式传递数据
2.创建一个Vue的实例，让各个兄弟共用同一个事件机制。
3.传递数据方，通过一个事件触发bus.$emit(方法名，传递的数据)。4.接收数据方，通过mounted()触发bus.$on(方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})，此时函数中的this已经发生了改变，可以使用箭头函数。

实例如下 ：

我们可以创建一个单独的js文件bus.js,内容如下

import Vue from 'vue'
export default new Vue

父组件

<template>
     <child-a></child-a>
     <child-b></child-b>
</template>

child-a组件

<template>
      <div class="components-a">
           <button @click="abtn">A按钮</button>
      </div>
</template>
<script>
import eventVue from '../../js/event.js'
export default {
      name: 'app',
      data () {
        return {
                ‘msg':"我是组件A"
        }
      },
      methods:{
           abtn:function(){
                   eventVue .$emit("myFun",this.msg)   //$emit这个方法会触发一个事件
           }
      }
}
</script>

child-b组件

<template>
     <div class="components-a">
         <div>{{btext}}</div>
     </div>
</template>
<script>
import eventVue from '../../js/event.js'
export default {
   name: 'app',
   data () {
        return {
           'btext':"我是B组件内容"
        }
   },
   created:function(){
       this.bbtn();
   },
   methods:{
       bbtn:function(){
            eventVue .$on("myFun",(message)=>{   //这里最好用箭头函数，不然this指向有问题
                 this.btext = message      
            })
       }
    }
}
</script>

还话可以使用vuex来实现 请看下篇