Vue 单文件中的数据传递示例

下面是“Vue 单文件中的数据传递示例”的完整攻略。

什么是 Vue 单文件组件

Vue 单文件组件是一种使用 .vue 扩展名的文件，它包含了三部分内容：

• 模板（template）：用于渲染 HTML 结构的模板。
• 脚本（script）：包含了组件的逻辑和数据等。
• 样式（style）：用于渲染样式的 CSS 代码。

单文件组件使得一个组件的所有内容都被封装在了一个文件里面，让组件的代码更加清晰易读。同时也方便了数据的传递。

单向数据流

在 Vue 中，数据的传递是单向的，也就是说，数据从父组件流向子组件，而不会反过来。子组件只能通过 props 属性接收来自父组件的数据，而不能改变父组件中的数据。当子组件需要向父组件传递数据时，需要通过 $emit 方法触发一个事件，让父组件监听到这个事件后，从而完成数据的传递。

示例一：父组件向子组件传递数据

下面是一个简单的例子，演示了父组件向子组件传递数据的过程。

父组件

父组件的代码如下所示：

<template>
  <div>
    <p>父组件中的数据：{{ message }}</p>
    <child-component :child-message="message"></child-component>
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  name: "ParentComponent",
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: "Hello World!",
    };
  },
};
</script>

在父组件的模板中，我们首先显示了一个来自父组件的数据 message。然后，我们通过 <child-component> 标签将数据传递给了子组件。child-message 是子组件中定义的 props 属性。注意，这里我们使用了 v-bind 指令，将父组件中的 message 数据绑定到了 child-message 属性上。

子组件

子组件的代码如下所示：

<template>
  <div>
    <p>来自父组件的数据：{{ childMessage }}</p>
  </div>
</template>

<script>
export default {
  name: "ChildComponent",
  props: {
    childMessage: {
      type: String,
    },
  },
};
</script>

在子组件的 props 属性中，我们定义了一个叫做 childMessage 的属性，并指定了它的类型为 String。在子组件的模板中，我们可以直接使用这个属性，来显示来自父组件的数据。

示例二：子组件向父组件传递数据

下面是另一个示例，演示了子组件向父组件传递数据的过程。

父组件

父组件的代码如下所示：

<template>
  <div>
    <child-component @my-event="handleEvent"></child-component>
    <p>来自子组件的数据：{{ message }}</p>
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  name: "ParentComponent",
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: "",
    };
  },
  methods: {
    handleEvent(eventData) {
      this.message = eventData;
    },
  },
};
</script>

在父组件的模板中，我们先显示了一个来自子组件的数据 message。然后，我们引入了子组件，并在子组件中添加了一个 my-event 事件。我们还定义了一个 handleEvent 方法，用来接收子组件传递过来的数据。

子组件

子组件的代码如下所示：

<template>
  <div>
    <button @click="sendData">向父组件传递数据</button>
  </div>
</template>

<script>
export default {
  name: "ChildComponent",
  data() {
    return {
      message: "Hello World!",
    };
  },
  methods: {
    sendData() {
      this.$emit("my-event", this.message);
    },
  },
};
</script>

在子组件的模板中，我们显示了一个按钮，当按钮被点击时，会触发 sendData 方法。这个方法会通过 $emit 方法触发一个 my-event 事件，并传递了一个数据 this.message。父组件中定义的 handleEvent 方法会接收到这个数据，并将它保存在 message 变量中。

这就是一个简单的子组件向父组件传递数据的示例。

以上就是本篇攻略对“Vue 单文件中的数据传递示例”的完整讲解，希望对你有所帮助。