Vue组件通讯

Vue组件通讯

1.父传子：

在父组件的子组件标签上绑定一个属性，挂载要传输的变量。在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props:[“属性名”] props:{属性名:数据类型}
父组件中代码：

 <template>
   <cateTab :content="item.content"></cateTab>
 </template>
 <script>
 import cateTab from "../../components/cateTab.vue" //引入子组件
 components: {
			cateTab,
		}
 </script>

子组件中代码：

<script>
	export default {
		data() {
			return {
			
			}
		},
		props: ['content']  //接收父组件传过来的值
	}
</script>

子组件通过props来接受数据

第一种方法

props: ['childCom']

第二种方法

props: {
    childCom: String //这里指定了字符串类型，如果类型不一致会警告的哦
}

第三种方法

props: {
    childCom: {
        type: String,
        default: 'sichaoyun' 
    }
}

2.子传父：

在父组件的子组件标签上通过绑定自定义事件，接受子组件传递过来的事件。子组件通过$emit触发父组件上的自定义事件，发送参数
父组件中代码

 <template>
 <my-input  class="search" v-model="sear" @tt="searchbox"></my-input>
  </template>
  <script>
   import my-input from "../../components/myInput.vue" //引入子组件
    components: {
			my-input,
		}
   </script>

子组件中代码

<template>
  <div class="">
    <input class="inp" :value="sear" type="text" @input="$emit('input',$event.target.value)" @keydown.enter="ss" />
  </div>
</template>
<script>
export default {
  props: ["val"],
  props:{
    sear:{
      type:String
    }
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    ss() {
      this.$emit('tt'); //为向父组件传递的数据
    },
  },
};
</script>

3.兄弟组件传值：

通过main.js初始化一个全局的$bus,在发送事件的一方通过 $bus. $emit(“事件名”，传递的参数信息)发送，在接收事件的一方通过 $bus. $on(“事件名”,参数)接收传递的事件
假设你有两个Vue组件需要通信： A 和 B ，A组件按钮上面绑定了点击事件，发送一则消息，B组件接收。

1. 初始化，全局创建$bus

直接在项目中的 main.js 初始化 $bus :

// main.js
window.$bus=new Vue();

注意，这种方式初始化一个 全局的事件总线 。

2. 发送事件

$ bus.$emit(“aMsg”, ‘来自A页面的消息’);

<!-- A.vue -->
<template>
   <button @click="sendMsg()">-</button>
</template>

<script> 
//import $bus from "../bus.js";
export default {
 methods: {
   sendMsg() {
     $bus.$emit("aMsg", '来自A页面的消息');
   }
 }
}; 
</script>

接下来，我们需要在 B页面 中接收这则消息。

3. 接收事件

$ bus.$on(“事件名”,callback)

<!-- IncrementCount.vue -->
<template>
 <p>{{msg}}</p>
</template>

<script> 
//import $bus  from "../bus.js";
export default {
 data(){
   return {
     msg: ''
   }
 },
 mounted() {
   $bus.$on("aMsg", (msg) => {
     // A发送来的消息
     this.msg = msg;
   });
 }
};
</script>