627_组件间通信(props)

App组件：

<template>
  <div>
    <Input :receive="receive" />
    <Output :data1="data1" />
    <!-- 向Output组件传递data1 -->
  </div>
</template>

<script>
import Input from "./components/Input";
import Output from "./components/Output";

export default {
  name: "App",
  components: { Input, Output },
  data() {
    return {
      data1: "",
    };
  },
  methods: {
    receive(title) {
      this.data1 = title; //将Input传递过来的值赋值给data1
    },
  },
};
</script>

Input组件：

<template>
  <div class="demo">
    <input type="text" v-model="title" />
    <button @click="addDo">添加</button>
  </div>
</template>

<script>
export default {
  name: "Input",
  props: ["receive"],
  data() {
    return {
      title: "",
    };
  },
  methods: {
    addDo() {
      this.receive(this.title);
      //只要上面的button一点击，就会执行addDo这个函数，触发receive函数的执行，接收title的值
    },
  },
};
</script>

<style>
</style>

Output组件：

<template>
  <div>
    <textarea v-model="data1"></textarea>
  </div>
</template>

<script>
export default {
  name: "Output",
  props: ["data1"],
  data() {
    return {};
  },
};
</script>

<style lang="css">
textarea {
  width: 500px;
  height: 500px;
}
</style>