父组件
<template>
<div>
这是father组件
<son son="son" @res="res"></son>
</div>
</template>
<script>
import son from "./son";
export default {
nane: "father",
components: {
son,
},
data() {
return {
son: ["1", "2", "3"],
};
},
methods: {
res(father) {
console.log(father);
},
},
};
</script>
<style>
</style>
子组件
<template>
<div>
这是son组件
<ul @click="click">
<li v-for="item in son" :key="item">{{item}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "son",
data() {
return {
father: "this is son res",
};
},
props: {
son: {
type: String,
default: {},
},
},
methods: {
click() {
this.$emit("res", this.father);
},
},
};
</script>
<style>
</style>
涉及知识点:Vue父子组件之间通信、Vuefor循环、JS事件冒泡