子组件
<template>
<div class="container">
<div class="top">
<p class="p_left">{{titleLeft}}</p>
<p class="p_right" @click="clickAction">{{titleRight}}</p>
</div>
<div class="line"></div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
titleLeft: {
type: String,
default: "这是默认的titleLef"
},
titleRight: {
type: String,
default: "这是默认的titleRight"
}
},
data() {
return {};
},
methods: {
clickAction() {
this.$emit("clickHeadAction", this.titleRight);
}
}
};
</script>
父组件
<template>
<div class="hello">
<ActivityHead @clickHeadAction="clickChild"></ActivityHead>
</div>
</template>
<script>
import ActivityHead from "./svgIcon";
export default {
components: {
ActivityHead
},
data() {
return {
msgLeft: "xxxxxxxx",
msgRight: "dddd"
};
},
computed: {},
methods: {
clickChild(e) {
console.log(e);
}
}
};
</script>
效果
image.png
