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

一、组件化思想

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

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

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

二、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>


<!-- 组件product-item的模板 -->
<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>

<!-- 设置scoped属性指定当前样式作用域 -->
<style scoped>
    .title {
        color: red;
    }
</style>