写一个vue父子组件传值的例子

父组件：

<template>
  <div>
    <p>父组件的count值：{{ count }}</p>
    <button @click="increment">增加</button>
    <Child :child-count="count" @child-increment="increment"></Child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

子组件：

<template>
  <div>
    <p>子组件的count值：{{ childCount }}</p>
    <button @click="childIncrement">增加</button>
  </div>
</template>

<script>
export default {
  props: {
    childCount: {
      type: Number,
      required: true
    }
  },
  methods: {
    childIncrement() {
      this.$emit('child-increment')
    }
  }
}
</script>

在父组件中，通过在子组件上绑定`child-count`属性，将父组件的`count`值传递给子组件。同时，通过在子组件上绑定`@child-increment`事件，监听子组件的增加操作，然后调用父组件的`increment`方法，实现父子组件之间的通信。