文章目录

• Vue 组件
• • 什么是组件？
  • 创建组件
  • 添加组件
  • 单个组件
  • 总结

    ---

    Vue 组件

    Vue 中的组件让我们可以将网页分解为易于使用的较小部分。

    我们可以使用独立于网页其余部分的 Vue 组件，该组件具有自己的内容和逻辑。

    网页通常由许多 Vue 组件组成。

    什么是组件？

    组件是可重复使用且自包含的代码片段，它封装了用户界面的特定部分，以便我们可以制作可扩展且更易于维护的 Vue 应用程序。

    我们可以自己在 Vue 中制作组件，也可以使用我们稍后将了解的内置组件，例如 或 。这里我们将重点介绍我们自己制作的组件。

    创建组件

    Vue 中的组件是一个非常强大的工具，因为它使我们的网页更具可扩展性，更大的项目变得更易于处理。

    让我们制作一个组件并将其添加到我们的项目中。

    在 src 文件夹中创建一个新文件夹 components。

    在组件文件夹中，创建一个新文件 FoodItem.vue。通常使用 PascalCase 命名约定来命名组件，不带空格，所有新单词都以大写字母开头，第一个单词也是如此。

    确保 FoodItem.vue 文件如下所示：

    FoodItem.vue 组件内的代码：

    
    {{ name }>
    {{ message }>
    
    
    
    export default {
    data() {
    return {
    name: 'Apples',
    message: 'I like apples'
    }
    }
    };
    
    
    

    如您在上例中看到的，组件也由 、 和 标签组成，就像我们的主要 App.vue 文件一样。

    添加组件

    请注意，上例中的 标签以 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 文件中 标签内的自定义标签 ，如下所示：

    
    （图片来源网络，侵删）

    App.vue:

    食物
    
    
    
    
    
    
    

    然后，让我们在 App.vue 文件中的 标签内添加一些样式。确保开发服务器正在运行，并检查结果。

    示例获取您自己的 Vue 服务器

    App.vue:

    食物
    
    
    
    
    
    
    #app > div {
    border: dashed black 1px;
    display: inline-block;
    margin: 10px;
    padding: 10px;
    background-color: lightgreen;
    }
    
    

    开发模式：使用 Vue 项目时，通过在终端中运行以下代码行，始终将项目置于开发模式很有用：

    npm run dev
    

    单个组件

    使用 Vue 中的组件时，一个非常有用且强大的属性是，我们可以让它们单独运行，而不必像使用纯 JavaScript 那样用唯一 ID 标记元素。Vue 会自动处理每个组件。

    让我们在单击 元素时让它们计数。

    在主应用程序文件 App.vue 中添加的唯一内容是 CSS，使光标看起来像一只手指在悬停期间指向，以暗示存在某种点击功能。

    在 App.vue 中的 标签中添加的 CSS 代码：

    #app > div:hover {
    cursor: pointer;
    }
    

    在我们的组件文件 FoodItem.vue 中，我们必须添加一个数据属性 count、一个单击监听器到 元素、一个在单击发生时运行以增加计数器的方法，以及一个文本插值 {{}} 来显示计数。

    示例

    FoodItem.vue:

    
    {{ name }>
    {{ message }>
    您已点击我 {{ clicks }} 次。
    
    
    
    export default {
    data() {
    return {
    name: 'Apples',
    message: 'I like apples',
    clicks: 0
    }
    },
    methods: {
    countClicks() {
    this.clicks++;
    }
    }
    }
    
    
    #red {
    font-weight: bold ;
    color: rgb(144, 12, 12);
    }
    
    

    我们不必定义唯一 ID 或为 Vue 做任何额外工作来单独处理每个 元素的计数，Vue 会自动执行此操作。

    但除了不同的计数器值外， 元素的内容仍然相同。

    ---

    总结

    本文介绍了Vue 组件Components的使用，如有问题欢迎私信和评论