创建两个Vue组件,一个用于父组件,另一个用于子组件。父组件传递数据给子组件,子组件接收并显示这些数据。
时间: 2023-11-29 16:44:14 浏览: 76
创建两个Vue组件,一个用于父组件,另一个用于子组件。在父组件中使用props属性将数据传递给子组件,子组件通过props接收并显示这些数据。具体步骤如下:
1.在父组件中定义需要传递给子组件的数据,例如一个对象或数组。
2.在父组件中引入子组件,并在模板中使用子组件标签,并将需要传递的数据通过props属性传递给子组件。
3.在子组件中定义props属性,接收父组件传递过来的数据。
4.在子组件中使用props接收到的数据进行展示。
代码示例:
父组件模板:
```
<template>
<div>
<child-component :data="myData"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
myData: {
name: 'John',
age: 30
}
}
}
}
</script>
```
子组件模板:
```
<template>
<div>
<p>Name: {{ data.name }}</p>
<p>Age: {{ data.age }}</p>
</div>
</template>
<script>
export default {
props: {
data: {
type: Object,
required: true
}
}
}
</script>
```
阅读全文