1、vue设计一个University子组件,该子组件接受父组件传来的两个数据,一个内容是学校名,一个是学校logo图片带路劲的文件名,子组件展示学校名字和学校logo;在父组件中调用该子组件并传递相应数据。
时间: 2024-11-21 07:26:32 浏览: 14
在Vue.js中创建一个名为`University`的子组件,你可以按照以下步骤进行:
1. **定义 University 子组件**:
```html
<template>
<div>
<h2>{{ schoolName }}</h2>
<img :src="logoUrl" alt="School Logo">
</div>
</template>
<script>
export default {
name: 'University',
props: {
// 定义接收的数据属性
schoolName: {
type: String,
required: true
},
logoUrl: {
type: String,
required: true
}
}
}
</script>
```
在这个组件里,我们定义了两个props `schoolName` 和 `logoUrl` 来接收父组件传递的数据。
2. **在父组件中使用子组件并传递数据**:
```html
<template>
<div>
<!-- 父组件中调用 University 组件 -->
<University :schoolName="universityName" :logoUrl="'/path/to/your/logo.jpg'" />
</div>
</template>
<script>
import University from './components/University.vue';
export default {
components: {
University
},
data() {
return {
universityName: '某大学', // 父组件实际的数据
};
}
};
</script>
```
在父组件模板中,通过`v-bind`指令将数据绑定到子组件的prop上。这里假设`logoUrl`是一个字符串路径,你需要替换为实际的URL。
阅读全文