Vue页面传值：Props属性与$emit事件的应用介绍

Crhy、Y2024-01-06 20:24

一、vue页面传值

在Vue页面中传值有多种方式，简单介绍以下两种

通过props属性传递值：父组件在子组件上定义props属性，子组件通过props接收父组件传递的值。

通过 $emit触发事件传递值：子组件通过$ emit方法触发一个自定义事件，并传递需要传递的值给父组件。

二、案例实践

2.1 props属性传递值方式

父组件：

html 复制代码

<template>
  <div>
    <ChildComponent :message="message" />
  </div>
</template>

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

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

子组件(ChildComponent.vue)：

html 复制代码

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true,
    },
  },
};
</script>

2.2 $emit触发事件传递值

父组件：

html 复制代码

<template>
  <div>
    <ChildComponent @message="handleMessage" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleMessage(message) {
      console.log(message);
    },
  },
};
</script>

子组件(ChildComponent.vue)：

html 复制代码

<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello World!');
    },
  },
};
</script>

这两种方式都可以实现在Vue页面间传值，具体使用哪种方式取决于你的需求和组件间的关系。

通过props属性传递值方式适用于父组件向子组件传递数据的场景，可以直接传递数据，简洁方便，但数据传递是单向的。

通过$emit触发事件传递值方式适用于子组件向父组件传递数据的场景，可以实现双向数据传递，但需要在父组件中监听子组件的自定义事件，可能会导致代码冗余。