举例说明父子组件传值

在Vue.js中，父子组件之间的通信主要通过props和emit两种方式来实现。具体实现方法如下：

1. 父组件向子组件传值
父组件可以通过props属性向子组件传递数据，子组件通过props选项接收数据。例如：

<template>
  <div>
    <child :message="parentMessage"></child>
  </div>
</template>

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

export default {
  components: {
    Child
  },
  data () {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

子组件可以通过props选项接收数据，并在模板中使用该数据。例如：

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

<script>
export default {
  props: ['message']
}
</script>

2. 子组件向父组件传值
子组件可以通过emit方法向父组件传递数据，父组件通过v-on指令监听子组件的事件并接收数据。例如：

<template>
  <div>
    <button @click="sendMessage">Send message to parent</button>
  </div>
</template>

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

父组件可以通过v-on指令监听子组件的事件，并在相应的方法中接收数据。例如：

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

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

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

以上就是父子组件传值的两种方法。需要注意的是，在使用props和emit时，要遵循单向数据流的原则，即只能从父组件向子组件传递数据，不能反过来。