Vue父子组件之间通信（子向父、父向子组件传值）

父组件

<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事件冒泡