vue2 父调用子组件数据
时间: 2023-12-28 22:06:18 浏览: 25
根据提供的引用内容,Vue2中父组件调用子组件的数据可以通过props来实现。父组件可以将数据通过props传递给子组件,子组件可以通过this.$props来访问这些数据。具体实现方法如下:
父组件:
```vue
<template>
<div>
<child-component :message="parentMessage"></child-component>
<button @click="changeMessage">改变父组件的message</button>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: '父组件的message'
}
},
methods: {
changeMessage() {
this.parentMessage = '改变后的父组件message'
}
}
}
</script>
```
子组件:
```vue
<template>
<div>
<p>子组件接收到的message:{{ message }}</p>
</div>
</template>
<script>
export default {
props: {
message: {
type: String,
default: ''
}
}
}
</script>
```
在上述代码中,父组件通过props将parentMessage传递给了子组件,子组件通过this.$props.message来访问这个数据。当父组件中的changeMessage方法被调用时,parentMessage的值会改变,子组件中的message也会随之改变。