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

 

一、vue页面传值

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

1. 通过props属性传递值：父组件在子组件上定义props属性，子组件通过props接收父组件传递的值。
2. 通过$emit触发事件传递值：子组件通过$emit方法触发一个自定义事件，并传递需要传递的值给父组件。

二、案例实践 

2.1 props属性传递值方式

父组件：

<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)：

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