Vue基础--组件的创建和使用

た入场券 2024-04-06 14:13 73阅读 0赞

### 一、组件化思想 ###

一个页面中所有的处理概述逻辑全部放在一起，处理起来就会变得非常复杂，不利于后续的管理以及扩展。

但是，我们将一个页面逻辑复杂的页面拆分成一个个小的功能块，每个功能块只完成属于自己这部分独立的功能。

把大功能拆分成一个个小的功能，这样做不仅可以降低开发难度而且今后也更加易于维护。

### 二、Vue中的组件化方式 ###

*  根组件
 *  全局组件
 *  局部组件

#### 2.1 根组件 ####

<div id="app">
        <h2>{
       {message}}</h2>
    </div>
    
    <script src="../lib/vue.js"></script>
    <script>
        // 1.根组件定义: App组件(根组件)
        const App = {
          
            data() {
          
                return {
          
                    message: "Hello Vue"
                }
            }
        }
    
        // 2.创建app
        const app = Vue.createApp(App)
    
        // 3.挂载app
        app.mount("#app")
    </script>

`Vue`实例的创建过程可以拆解成上面三个步骤。

`createApp`函数传入了一个对象`App`，这个对象其实本质上就是一个组件，也是我们应用程序的**根组件**。

组件化提供了一种抽象，让我们可以开发出一个个**独立可复用**小组件来构造我们的应用。

在`Vue`中，任何的应用都可以被抽象成一颗组件树。

#### 2.2 全局组件 ####

在任何其他的组件中都可以使用的组件。

<div id="app">
        <product-item></product-item>
        <product-item></product-item>
    </div>
    
    
    
    <template id="item">
        <div class="product">
            <h2>我是商品</h2>
            <div>商品图片</div>
            <div>
                商品价格: 
                <span>¥9.9</span>
           	</div>
            <p>商品描述信息, 秒杀</p>
        </div>
    </template>
    
    <script src="../lib/vue.js"></script>
    <script>
    
        // 1.组件: App组件(根组件)
        const App = {
          }
    
        // 2.创建app
        const app = Vue.createApp(App)
    
        // 3.注册一个全局组件 product-item
        app.component("product-item", {
          
            template: "#item"
        })
    
        // 2.挂载app
        app.mount("#app")
    </script>

*  `Vue`通过`app.component(组件名称, 组件的对象)`的方式创建一个全局组件
 *  注册成功后，可以在任意其他组件的`template`中使用，可以直接使用`product-item`的组件

#### 2.3 局部组件 ####

只有在注册的组件中才能使用的组件。

<div id="app">
        <product-item></product-item>
    </div>
    
    <template id="product">
        <div class="product">
            <h2>{
       {title}}</h2>
            <p>商品描述, 限时折扣, 赶紧抢购</p>
            <p>价格: {
       {price}}</p>
            <button>收藏</button>
        </div>
    </template>
    
    
    <script src="../lib/vue.js"></script>
    <script>
        // 1.创建组件对象
        const ProductItem = {
          
            template: "#product",
            data() {
          
                return {
          
                    title: "我是product的title",
                    price: 9.9
                }
            }
        }
    
       
        const app = Vue.createApp({
          
           // 在Vue实例中注册局部组件，哪个Vue实例需要用，就在哪个实例的components组件API中注册
            components: {
          
                ProductItem		//es6写法ProductItem:ProductItem可以简写成ProductItem
            }
        })
    
        // 2.挂载app
        app.mount("#app")
    </script>

### 三、组件中的逻辑 ###

<div id="app">
        <HomeNav></HomeNav>
        <home-nav></home-nav>
        <product-item></product-item>
    </div>
    
    <template id="nav">
        <h2>导航栏</h2>
    </template>
    
    <template id="product">
        <div class="product">
            <h2>{
       {title}}</h2>
            <p>商品描述： 限时折扣</p>
            <p>价格: {
       {price}}</p>
            <button @click="favarItem">收藏</button>
        </div>
    </template>
    
    <script src="../lib/vue.js"></script>
    <script>
        // 1.创建一个Vue的app实例
        const app = Vue.createApp({
          
            data() {
          
                return {
          
                    message: "Hello Vue"
                }
            },
        })
    
        // 2.注册全局组件product-item，并编写它的逻辑
        app.component("product-item", {
          
            template: "#product",
            data() {
          
                return {
          
                    title: "我是商品Item",
                    price: 9.9
                }
            },
            methods: {
          
                favarItem() {
          
                    console.log("收藏了当前的item")
                }
            }
        })
    
        app.component("HomeNav", {
          
            template: "#nav"
        })
    
        // 2.挂载app
        app.mount("#app")
    </script>

**组件本身也可以有自己的代码逻辑：**

比如`data`、`computed`、`methods`、`watch`等等，根组件中能够使用的选项`API`，其它组件中也可以使用。

在实际开发中，基本都是注册局部组件来进行开发。

### 四、组件名称的规则 ###

*  使用`kebab-case`（短横线分割符）
    
     *  引用这个自定义元素时也必须使用短横线分割符，例如 `<my-component-name>`
        
            
            <product-item></product-item>
            
            <script>
                app.component("product-item", {
                      
                    template: "#item"
                })
            </script>
 *  使用`PascalCase`（驼峰命名法）
    
     *  引用这个自定义元素时两种命名法都可以使用
     *  也就是说`<my-component-name>`和 `<MyComponentName>`都是可以被`Vue`解析的；
        
            
            <product-item></product-item>
            <productItem></productItem>
            
            <script>
                app.component("productItem", {
                      
                    template: "#item"
                })
            </script>

### 五、组件的样式 ###

开发时，根组件中会引入很多其它的组件。难免会出现样式命名冲突的问题。

特别是当项目很大时，根本不清楚哪些样式会影响到其它组件，造成样式难以维护。

为了解决这个问题，我们应该让每个组件的样式设置作用域，让自己组件的样式只作用于当前组件。

<template>
    	<div class="app">
        	<h2 class="title">我是App.vue中的h2元素</h2>
        </div>
    </template>
    
    <script>
    
        export default {
          
            name: 'App',
        }
    </script>
    
    
    <style scoped>
        .title {
          
            color: red;
        }
    </style>

只要在`style`标签上设置`scoped`属性就可以让样式只会当前组件生效，而不会影响其它组件。

今后几乎所有的组件样式标签，都是要加上它来防止样式对其它组件造成影响。