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>



<template id="item">
    <div class="product">
        <h2>我是商品h2>
        <div>商品图片div>
        <div>
            商品价格: 
            <span>¥9.9span>
       	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（短横线分割符）

  • 引用这个自定义元素时也必须使用短横线分割符，例如

    
    <product-item>product-item>
    
    <script>
        app.component("product-item", {
            template: "#item"
        })
    script>
    

• 使用PascalCase（驼峰命名法）

  • 引用这个自定义元素时两种命名法都可以使用

  • 也就是说和 都是可以被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属性就可以让样式只会当前组件生效，而不会影响其它组件。

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