vue组件之全局注册和局部注册

一、什么是组件组件：是由HTML、CSS、JavaScript所组成，是把某块效果界面封装起来，提供了界面效果【代码】的复用性【类似于Bootstrap】二、全局注册全局注册：当vue创建的时候，不管这个组件是否使用，都会被加载，这样的方式会比较占内存入门程序<!DOCTYPE html><html lang="en"><head><meta charse

姜泥断了姒

4680人浏览 · 2022-05-18 15:18:17

姜泥断了姒 · 2022-05-18 15:18:17 发布

一、什么是组件

组件：是由HTML、CSS、JavaScript所组成，是把某块效果界面封装起来，提供了界面效果【代码】的复用性【类似于Bootstrap】

二、全局注册

全局注册：当vue创建的时候，不管这个组件是否使用，都会被加载，这样的方式会比较占内存

入门程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../public/js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--    组件-->
    <button-count></button-count>
</div>
</body>
</html>
<script>
    //编写组件
    //参数一：自定义的组件名称【注意：不要全大写，如果是二个单词拼接，最好都是小写，用-连接】
    //参数二：对象
    Vue.component('button-count', {
        template: "<button @click='count++'>{{count}}</button>",
        data: function () {
            return {
            }
        }
    })
    
    new Vue({
        el: '#app',
    })
</script>

注意： 在注册vue组件的时候，一定不能忽略new Vue

三、局部注册

局部注册：当我们使用到某个组件，该组件才会被创建，如果不使用该组件，那么该组件不会被创建。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../public/js/vue.min.js"></script>
</head>
<body>

    <div id="app">
        <!--组件名称-->
        <button-count></button-count>
    </div>

    <script>
        //创建组件
        let ButtonCount = {
            template:"<h1>这是一个组件</h1>"
        }

        new Vue({
            el:"#app",
            components:{
                //当组件名称二个首字母大写的时候
                //html在识别的时候，会全部转换为小写，并且二个字母之间用-连接
                //当变量名称和属性名称相同的时候，可以只写一个
                ButtonCount
            }
        });

    </script>

</body>
</html>

无论怎么注册，html都比较麻烦，还需要写到script里面去，所以需要优化一下组件注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../../public/js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <handle-text></handle-text>
</div>

<!-- 一定要在容器外面，创建一个template标签-->
<template id="ID">
<!--这个id就是外面声明变量template属性的属性值
    最后把要写的html写到template标签里面
-->
<div>
    <h1>我是h1</h1>
</div>
</template>
</body>
</html>
<script>
    let HandleText = {
        //在这个对象里面存放template属性和一个自定义的属性值
        template: '#ID'
    }
    new Vue({
        el:'#app',
        components:{
            HandleText
        }
    })
</script>

注意：因为是组件，所以这个template标签里面只能有一个根标签

四、为什么在vue局部组件里面要有一个data函数

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^