vue单向数据流的深入讲解

<template>
  <div style="border: 1px solid #000">
    <h1>我是父组件</h1>
    <Son :info="info" :person="person"></Son>
    <button @click="fn">修改数据（父）</button>
  </div>
</template>

<script>
import Son from "./Son.vue";
export default {
  data() {
    return {
      info: "我是父组件中的数据",
      person: ["张三", "李四", "赵六"],
    };
  },
  components: {
    Son,
  },
  methods: {
    fn() {
      this.info = "我是父组件中点击修改后的数据";
    },
  },
};
</script>

<style scoped>
</style>

<template>
  <div>
    <h2>我是子组件</h2>
    <p>{{ info }}</p>
    <p v-for="(item, index) in person" :key="index">{{ item }}</p>
    <button @click="fn">修改数据（子）</button>
  </div>
</template>

<script>
export default {
  props: ["info", "person"],
  methods: {
    fn() {
      // 修改基本数据类型
      this.info = this.info + ",我现在被传递到子组件中";
      // 修改引用数据类型
      // this.person.push("韩七");
    },
  },
};
</script>

<style scoped>
div {
  border: 1px solid red;
  margin: 10px;
}
</style>