Vue 组件
Vue 中的组件使我们能够将网页分解为易于使用的较小部分。
我们可以使用 Vue 组件,该组件具有自己的内容和逻辑,与网页的其他部分隔离。
网页通常由许多 Vue 组件组成。
什么是组件?
组件是可重用的、自包含的代码片段,封装了用户界面的特定部分,因此我们可以使 Vue 应用程序具有可扩展性,更易于维护。
我们可以自己在 Vue 中创建组件,也可以使用我们稍后将了解的内置组件,如 <Teleport>
或 <KeepAlive>
。在这里,我们将专注于我们自己创建的组件。
创建组件
Vue 中的组件是一个非常强大的工具,因为它可以让我们的网页变得更可扩展,更大的项目变得更容易处理。
让我们创建一个组件并将其添加到我们的项目中。
- 在
src
文件夹中创建一个新的文件夹组件。 - 在
components
文件夹中,创建一个新文件 FoodItem.vue。通常使用 PascalCase 命名约定命名组件,不带空格,所有新词都以大写字母开头,也是第一个单词。 - 请确保 FoodItem.vue 文件如下所示:
<template>
<div>
<h2>{{ name }}</h2>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Apples',
message: 'I like apples'
}
}
};
</script>
<style></style>
添加组件
请注意,上例中的 <script>
标记以 export default
开头。这意味着可以在另一个文件中接收或导入包含数据属性的对象。我们将使用它将 FoodItem.vue
组件与 main.js 文件一起导入到现有项目中。
首先,将原始 main.js 文件中的最后一行重写为两行:
main.js:
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')
现在,在 main.js 文件中插入第 4 行和第 7 行,添加 FoodItem.vue
组件:
main.js:
import { createApp } from 'vue'
import App from './App.vue'
import FoodItem from './components/FoodItem.vue'
const app = createApp(App)
app.component('food-item', FoodItem)
app.mount('#app')
在第 7 行,添加了该组件,以便我们可以将其用作 App.vue
文件中 <template>
标记内的自定义标记 <food-item/>
,如下所示:
App.vue:
<template>
<h1>Food</h1>
<food-item/>
<food-item/>
<food-item/>
</template>
<script></script>
<style></style>
实例
让我们在 App.vue
文件的 <style>
标记中添加一些样式。确保开发服务器正在运行,并检查结果。
App.vue:
<template>
<h1>Food</h1>
<food-item/>
<food-item/>
<food-item/>
</template>
<script></script>
<style>
#app > div {
border: dashed black 1px;
display: inline-block;
margin: 10px;
padding: 10px;
background-color: lightgreen;
}
</style>
单个组件
在 Vue 中使用组件时,一个非常有用和强大的特性是,我们可以让它们单独运行,而不必像使用纯 JavaScript 那样用唯一的 ID 标记元素。Vue 会自动注意单独处理每个组件。
让我们在点击 <div>
元素时让它们发挥作用。添加到我们的主应用程序文件 App.vue
中的唯一一件事是在 CSS 中,使光标在悬停期间看起来像一只指针,这意味着有某种点击功能。
添加到 App.vue 中 <style>
标记的 CSS 代码:
#app > div:hover {
cursor: pointer;
}
在我们的组件文件 FoodItem.vue
中,我们必须添加一个数据属性 count
,一个 <div>
元素的点击监听器,一个在点击时运行的方法来增加计数,以及文本插值 {{}}
来显示计数。
实例
FoodItem.vue:
<template>
<div v-on:click="countClicks">
<h2>{{ name }}</h2>
<p>{{ message }}</p>
<p id="red">You have clicked me {{ clicks }} times.</p>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Apples',
message: 'I like apples',
clicks: 0
}
},
methods: {
countClicks() {
this.clicks++;
}
}
}
</script>
<style>
#red {
font-weight: bold ;
color: rgb(144, 12, 12);
}
</style>
我们不必定义唯一的 ID,也不必为 Vue 做任何额外的工作来单独处理每个 <div>
元素的计数,Vue 只需自动执行即可。
但是,除了计数器值不同之外,<div>
元素的内容仍然相同。在下一页中,我们将了解更多关于组件的信息,以便我们能够以更有意义的方式使用组件。例如,在每个 <div>
元素中显示不同种类的食物会更有意义。