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>