Vue组件间通信总结

// 父组件   :list="list" 传递list给子组件
<template>
  <div>
    <List :list="list" />
    <Input @getChildData="getChildData" />
  </div>
</template>

<script>
import List from "./List.vue";
import Input from "./Input.vue";
export default {
  data() {
    return {
      list: [
        { id: 1, name: "jack" },
        { id: 2, name: "tom" },
        { id: 3, name: "rose" },
      ],
    };
  },
  components: {
    List,
    Input,
  },
  methods: {
    getChildData(data) {
      console.log(data);
      this.list.push({ id: Math.random(), name: data });
    },
  },
};
</script>

<style lang="scss" scoped></style>

// 子组件: 定义props接收父组件传递的值，定义接收值的类型   list: Array

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id" v-text="item.name"></li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    list: Array,
  },
};
</script>

<style lang="scss" scoped></style>

// 子组件
<template>
  <div>
    <input type="text" v-model="str" />
    <button @click="add" @>添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: "",
    };
  },
  methods: {
    add() {
      this.$emit("getChildData", "aaa");
    },
  },
};
</script>

<style lang="scss" scoped></style>