Vue父组件与子组件之间的数据交互方式详解

介绍

Vue是一款流行的前端框架，它提供了一种组件化的开发方式来构建Web应用程序。Vue的组件化开发方式具有很高的灵活性和可重用性，但是在组件化开发中，如何进行组件之间的数据交互是一件非常重要的事情。本文将介绍Vue父组件与子组件之间的数据交互方式。

父组件向子组件传递数据

父组件向子组件传递数据的方式有两种：props和$emit。

1. props

父组件通过props向子组件传递数据。在子组件中，通过声明props来接收数据。

示例代码：

<template>
  <div>
    <h2>{{ message }}</h2>
    <HelloWorld :greet="message"/>
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      message: "Hello, Vue!"
    };
  },
};
</script>

在上面的代码中，我们定义了一个message数据，然后将它通过props的方式传递给了子组件HelloWorld。在子组件中，我们声明了一个props，用来接收父组件传递过来的数据。

子组件代码：

<template>
  <div>
    <h2>{{ greet }}</h2>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    greet: String
  },
};
</script>

2. $emit

父组件通过$emit向子组件传递数据，子组件通过$emit向父组件传递数据。在父组件中，我们通过v-on来监听子组件的事件，在子组件中触发$emit事件。

示例代码：

<template>
  <div>
    <h2>{{ message }}</h2>
    <HelloWorld @hello="handleHelloWorldEvent"/>
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      message: "Hello, Vue!"
    };
  },
  methods: {
    handleHelloWorldEvent(data) {
      this.message = data;
    }
  }
};
</script>

在上面的代码中，我们通过v-on监听了子组件HelloWorld触发的hello事件，在处理函数中更新了父组件的数据message。

子组件代码：

<template>
  <div>
    <button @click="handleClick">Say Hello</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  methods: {
    handleClick() {
      this.$emit("hello", "Hello, Vue from HelloWorld!");
    }
  },
};
</script>

在上面的代码中，我们在子组件中定义了一个handleClick方法，在该方法中触发了$emit事件，并传递了一个字符串数据。

子组件向父组件传递数据

子组件向父组件传递数据的方式是通过$emit事件。

示例代码：

<template>
  <div>
    <button @click="handleClick">Say Hello</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  methods: {
    handleClick() {
      this.$emit("hello", "Hello, Vue from HelloWorld!");
    }
  },
};
</script>

在上面的代码中，我们在子组件中定义了一个handleClick方法，在该方法中触发了$emit事件，并传递了一个字符串数据。

父组件代码：

<template>
  <div>
    <h2>{{ message }}</h2>
    <HelloWorld @hello="handleHelloWorldEvent"/>
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      message: "Hello, Vue!"
    };
  },
  methods: {
    handleHelloWorldEvent(data) {
      this.message = data;
    }
  }
};
</script>

在上面的代码中，我们通过v-on监听了子组件HelloWorld触发的hello事件，在处理函数中更新了父组件的数据message。