Vue2组件传参
<template>
<div class="nav" :style="{ backgroundColor: bg_color, color: text_color }">
<div class="left" @click="$emit('left-click', $event)">
<slot name="icon_left"></slot> {{ left_text }}
</div>
<div class="title">
<slot name="title"></slot>
{{ title }}
</div>
<div class="right" @click="$emit('right-click', $event)">
<slot name="icon_right"></slot> {{ right_text }}
</div>
</div>
</template>
<script>
import bus from "@/utils/bus";
export default {
//接收的地方要监听数据，$event 就是app页面发送的数据
created() {
bus.$on("msgchange", ($event) => {
console.log("msgchange");
this.myMsg = $event;
});
},
data() {
return {
myColor: "#f30",
myMsg: "",
};
},
props: {
text_color: {
type: String,
default: "#000",
},
bg_color: {
type: String,
default: "#fff",
},
title: {
type: String,
default: "",
},
left_text: {
type: String,
default: "返回",
},
right_text: {
type: String,
default: "",
},
},
};
</script>