vue从入门到放弃——（7）组件的基本使用

最新推荐文章于 2024-12-28 22:28:59 发布

原创最新推荐文章于 2024-12-28 22:28:59 发布 · 323 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

26 篇文章

订阅专栏

本文深入解析Vue.js中的组件概念，包括全局组件与局部组件的区别、定义及调用方式，通过实例展示组件如何封装可重用代码，扩展HTML标签功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是组件

组件的概念：

组件即自定义控件，是Vue.js最强大的功能之一

组件的用途：

组件能够封装可重用代码，扩展HTML标签功能

组件的本质：

自定义标签

组件的分类

全局组件

作用域：不同作用域内均可使用

局部组件

作用域：只在定义该组件的作用域内可以使用

注意：Vue组件只有全局组件和局部组件两种

全局组件

语法：

Vue.component(‘name’, {
     	   template: ‘<div></div1>’
});

全局组件的定义

定义位置：创建实例前定义全局组件

template的设置：
template：‘html代码’
template：‘#template1’引用template内容

数据的定义：
data：function(){
return {a:1,b:2}
}

函数的定义：

methods:{

函数名：function（）{}
}

全局组件的调用

组件的调用方法：<组件名></组件名>
组件的作用域：全局范围内均可调用

注意：

1.我们在创建组件的时候如果使用了驼峰命名法，那么在调用组件的时候需要把大写的内容转换为小写前面加-

eg：

<my-com></my-com>

全局组件定义eg：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="demodiv">
        <!--
            我们在创建组件的时候如果使用了驼峰命名法 
            那么在调用组件的时候需要把大写的内容转小写  前面加-
        -->
        <my-coma></my-coma>
        <my-comb></my-comb>
        <my-comc></my-comc>
        <my-comd></my-comd>
    </div>
    <template id="tem">
        <div>
            <p>外部模板1</p>
            <p>外部模板2</p>
            <p>外部模板3</p>
            <p>外部模板4</p>
        </div>
    </template>
    <template id="temb">
        <div>
            <h1>组件内部变量创建</h1>
            <p @click="fun()">{{text}}</p>
        </div>
    </template>
</body>

</html>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
    // 创建基本的全局组件  全局组件就是在那个vue实例中都可以使用的组件
    // 第一个参数是组件的名字,
    // 第二个参数是对象  里面包含着组件的一些相关属性
    Vue.component("myComa", {
        // 组件模板
        template: "<p>我是基础的全局组件</p>"
    })
    // 基本组件创建多个标签(如果有多个HTML标签的话那么！！！必须必须必须！！！需要在外部有个父容器包裹)
    Vue.component("myComb", {
        // 组件模板
        template: "<div><p>22222我是基础的全局组件</p><p>1111我是基础的全局组件</p></div>"
    })

    // 全局组件的外置模板（解决写内置模板的时候所有的不爽）
    Vue.component("myComc", {
        // 引用外部组件模板 
        // 1.必须先要创建外部组件模板书写位置 在vue管理的视图之外创建    template标签来创建
        // 2.把组件和外部模板建立关系
        template: "#tem"
    })

    // 在组件内部如何创建变量和函数
    // data:function(){return {}}
    Vue.component("myComd", {
        template: "#temb",
        data() {
            return {
                text: "我是一个变量"
            }
        },
        methods: {
            fun() {
                alert("aaaaaaaaa")
            }
        }
    })
    new Vue({
        el: "#demodiv",
        data: {}
    })
</script>

局部组件

语法：components

定义位置：实例配置项中定义，和el同级，组件不使用实例的数据

剩下的和全局组件没什么太大的区别

eg:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="demodiv">
        <!-- 局部组件定义    局部组件只能在当前定义组件的vue实例中进行使用
            
            定义局部组件的时候！！！！一定一定要注意单词   components
        -->

        <my-com></my-com>
    </div>
    <template id="tem">
        <div>
            <p>{{text}}</p>
            <p>我是一个局部组件</p>
            <p @click="fun()">我是一个局部组件</p>
        </div>
    </template>

</body>

</html>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        el: "#demodiv",
        data: {},
        components: {
            // 组件的名字:对象（就是当前组件的一些属性）
            "myCom": {
                template: "#tem",
                data() {
                    return {
                        text: "我是局部组件的变量"
                    }
                },
                methods: {
                    fun() {
                        alert(this.text)
                    }
                }
            }
        }
    })
</script>

组件ex：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .oUl{
            list-style-type: none;
            margin-top: 50px;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
        .oLi{
            width: 20%;
            height: 60px;
            text-align: center;
            border-top: 1px solid red;
            float: left;
        }
    </style>
</head>

<body>
    <div class="box">
        <com-a></com-a>
    </div>
    <template id="tem">
        <div>
            <ul class="oUl">
                <li v-for="(v,i) in arr"  class="oLi">
                    ![在这里插入图片描述]()
                </li>
            </ul>
        </div>
    </template>
</body>

</html>
<script src=" ./node_modules/vue/dist/vue.min.js"> </script> <script>

    new Vue({
        el: ".box",
        data: {},
        components: {
            "comA": {
                template: "#tem",
                data() {
                    return {
                        arr: [
                            { "img": "./img/1.png" },
                            { "img": "./img/2.png" },
                            { "img": "./img/3.png" },
                            { "img": "./img/4.png" },
                            { "img": "./img/5.png" }
                        ]
                    }
                }
            }
        }
    })
</script>