怎么在vue中添加名人名言组件
时间: 2024-10-20 19:04:35 浏览: 6
在Vue中创建一个名人名言组件通常会涉及到几个步骤:
1. **创建组件**: 首先,你需要创建一个新的Vue组件文件,比如`FamousQuote.vue`,然后在其中定义模板、数据和事件处理。
```html
<!-- FamousQuote.vue -->
<template>
<div class="famous-quote">
<h3>{{ quoteAuthor }}</h3>
<p>{{ famousQuoteText }}</p>
</div>
</template>
<script>
export default {
name: 'FamousQuote',
data() {
return {
quoteAuthor: '',
famousQuoteText: ''
}
},
props: { // 接收外部传入的数据
author: String,
text: String
},
mounted() {
this.quoteAuthor = this.author;
this.famousQuoteText = this.text;
}
}
</script>
```
2. **导入并使用**: 在需要显示这个名言的父组件中,通过`<component>`标签引入并使用它,并传递数据到组件内。
```html
<!-- ParentComponent.vue -->
<template>
<div>
<FamousQuote :author="selectedAuthor" :text="selectedQuote"></FamousQuote>
</div>
</template>
<script>
import FamousQuote from './FamousQuote.vue';
export default {
components: {
FamousQuote
},
data() {
return {
selectedAuthor: 'Albert Einstein', // 示例作者
selectedQuote: 'Imagination is more important than knowledge.' // 示例名言
}
}
}
</script>
```
阅读全文