vue子父组件传值

在Vue中，子组件可以通过props属性接收父组件传递过来的值。

父组件可以通过子组件的标签属性来传递值，子组件通过props属性接收父组件传递过来的值。

以下是一个示例：

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

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

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


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

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

在上述示例中，父组件通过:message="message"将message的值传递给子组件的message属性。子组件通过props属性接收父组件传递过来的message值，并在模板中进行渲染。

需要注意的是，父组件传递给子组件的值是单向的，即父组件的值改变时，子组件的值也会相应改变，但是子组件的值改变时，父组件的值不会受到影响。如果需要子组件改变父组件的值，可以通过在子组件中触发事件，父组件监听该事件并相应改变值