vue2父向子组件传值
时间: 2023-08-23 09:10:54 浏览: 83
在 Vue 2 中,父组件可以通过 props 属性向子组件传递值。以下是一个简单的示例:
```html
<!-- 父组件 -->
<template>
<div>
<ChildComponent :message="parentMessage" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: 'Hello from parent!'
};
}
};
</script>
```
```html
<!-- 子组件 -->
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
props: {
message: {
type: String,
required: true
}
}
};
</script>
```
在上面的示例中,父组件通过将 `parentMessage` 作为 props 属性传递给子组件,子组件则通过定义 `message` 属性接收父组件传递的值。在子组件的模板中,可以使用 `{{ message }}` 来显示接收到的值。
需要注意的是,父组件传递给子组件的值是单向的,即只能从父组件传递给子组件,而不能反过来。如果需要在子组件中修改传递的值,可以通过在子组件中触发事件并将修改后的值传递给父组件来实现。
阅读全文