vue子组件向父组件传值的例子

Vue是一种流行的JavaScript框架，其支持组件化开发。在Vue中，子组件可以通过向父组件传递数据来实现信息的共享和交互。以下是一个Vue子组件向父组件传值的简单例子：

在父组件中，我们可以定义一个data属性，然后将其绑定到子组件上。例如：

<template>
<div>
<child-component v-bind:child-data="parentData"></child-component>
</div>
</template>

<script>
export default {
data() {
return {
parentData: 'Hello, World!'
}
}
}
</script>

在子组件中，我们可以声明一个props属性，用于接收父组件传递的数据。例如：

<template>
<div>{{ childData }}</div>
</template>

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

在这个例子中，父组件通过child-data属性把parentData的值传递给了子组件，并将其命名为childData。子组件通过props属性声明了一个名为childData的属性，用于接收这个数据。

在运行时，父组件的parentData值会被传递给子组件，并在子组件中显示出来。如果父组件中的parentData值发生了变化，子组件中的childData也会更新。这种变化的响应是由Vue框架自动实现的。