vue2props子组件接收父组件传来的数据
时间: 2023-11-18 17:05:59 浏览: 137
vue2.0 子组件改变props值,并向父组件传值的方法
在Vue2中,子组件接收父组件传来的数据可以通过props进行实现。下面是一个简单的示例:
在父组件中,通过在子组件标签上添加属性来传递数据:
```html
<template>
<div>
<ChildComponent :message="parentMessage" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
data() {
return {
parentMessage: 'Hello from parent component'
};
},
components: {
ChildComponent
}
};
</script>
```
在子组件中,通过定义props来接收父组件传来的数据:
```html
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
props: ['message']
};
</script>
```
在上述示例中,父组件通过`:message="parentMessage"`将`parentMessage`数据传递给子组件,并在子组件中通过`props: ['message']`定义了一个名为`message`的prop来接收父组件传来的数据。
阅读全文