vue传值

在 Vue.js 中，组件之间可以通过 props 和事件实现传值。以下是传值的两种方式：

1. props

props 是一种用于从父组件向子组件传递数据的方式。在父组件中使用子组件时，可以通过 props 属性向子组件传递数据，例如：

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>

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

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

在子组件中，可以通过 props 属性接收父组件传递的数据，例如：

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: String,
  },
};
</script>

2. 事件

事件是一种用于从子组件向父组件传递数据的方式。在子组件中，可以通过 `$emit` 方法触发一个自定义事件，并传递数据，例如：

<!-- 子组件 -->
<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  methods: {
    handleClick() {
      this.$emit('child-click', 'Hello');
    },
  },
};
</script>

在父组件中，可以通过 `v-on` 指令监听子组件触发的自定义事件，并处理传递的数据，例如：

<!-- 父组件 -->
<template>
  <div>
    <child-component @child-click="handleChildClick"></child-component>
  </div>
</template>

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

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

通过事件的方式可以让子组件与父组件解耦，更加灵活。在实际开发中，可以根据实际需求选择合适的方式传递数据。