vue2父组件怎么向子组件传值
时间: 2023-09-16 12:13:07 浏览: 79
Vue2父组件向子组件传值可以通过props属性实现。
1. 在子组件中定义props属性,用于接收父组件传递的值,例如:
```
export default {
props: {
message: String
}
}
```
2. 在父组件中使用子组件时,使用v-bind指令绑定props属性,例如:
```
<my-component v-bind:message="parentMessage"></my-component>
```
其中,parentMessage是父组件中定义的数据。
3. 子组件接收到父组件传递的值后,就可以在组件中使用该值,例如:
```
<div>{{ message }}</div>
```
完整示例代码:
父组件:
```
<template>
<div>
<my-component v-bind:message="parentMessage"></my-component>
</div>
</template>
<script>
import MyComponent from './MyComponent.vue'
export default {
components: {
MyComponent
},
data () {
return {
parentMessage: 'Hello from parent component'
}
}
}
</script>
```
子组件:
```
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: {
message: String
}
}
</script>
```
阅读全文