vue父子组件怎么传值

Vue父子组件之间可以通过props和$emit来传值。

1. 使用props传递数据

父组件通过props属性将数据传递给子组件，子组件通过props接收数据。示例如下：

父组件：

<template>
  <div>
    <child-component :message="msg"></child-component>
  </div>
</template>

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

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

子组件：

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

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

2. 使用$emit触发事件

子组件通过$emit触发事件，父组件通过v-on监听事件并处理数据。示例如下：

子组件：

<template>
  <div>
    <button @click="increaseCounter">Increase Counter</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    }
  },
  methods: {
    increaseCounter() {
      this.counter++;
      this.$emit('update:counter', this.counter);
    }
  }
}
</script>

父组件：

<template>
  <div>
    <child-component :counter.sync="myCounter"></child-component>
    <div>Counter: {{ myCounter }}</div>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      myCounter: 0
    }
  }
}
</script>

在父组件中，使用.sync修饰符可以实现双向绑定。在子组件中，使用$emit触发事件，并传递参数。父组件中监听事件，并更新数据。