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

ゝ一纸荒年。 2023-06-25 06:28 101阅读 0赞

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

**父传子**  
主要是通过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. e m i t ( 方 法 名 ， 传 递 的 数 据 ) 。 4. 接 收 数 据 方 ， 通 过 m o u n t e d ( ) 触 发 b u s . emit(方法名，传递的数据)。 4.接收数据方，通过mounted()\{\}触发bus. emit(方法名，传递的数据)。4.接收数据方，通过mounted()触发bus.on(方法名，function(接收数据的参数)\{用该组件的数据接收传递过来的数据\})，此时函数中的this已经发生了改变，可以使用箭头函数。

实例如下 ：

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

import Vue from 'vue'
    export default new Vue

父组件

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来实现 请看下篇