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

更新时间：2024年03月24日 08:59:40 作者：姜泥断了姒

这篇文章主要介绍了vue组件之全局注册和局部注册方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

一、什么是组件

组件：是由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开发中,父组件和子组件之间的数据传递是一项常见的任务,本文将介绍如何在Vue中实现父组件控制子组件的值,以便灵活地管理和更新子组件的数据,文中有详细的代码讲解,需要的朋友可以参考下
2023-11-11
vue实现登陆功能
这篇文章主要为大家详细介绍了vue实现登陆功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
vue.js实现的经典计算器/科学计算器功能示例
这篇文章主要介绍了vue.js实现的经典计算器/科学计算器功能,具有基本四则运算计算器以及科学计算器的功能,可实现开方、乘方、三角函数以及公式运算等功能,需要的朋友可以参考下
2018-07-07
vue-iview动态新增和删除的方法
这篇文章主要为大家详细介绍了vue-iview动态新增和删除的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-06-06
带你熟练掌握Vue3之Pinia状态管理
pinia是vue3官方的状态管理工具,当然vue2也可以用,vue2中的状态管理工具是vuex,vue3中不再使用vuex,推荐使用的是pinia,和vuex差不多,但比vuex更方便、更强、更好,下面这篇文章主要给大家介绍了关于Vue3之Pinia状态管理的相关资料,需要的朋友可以参考下
2022-11-11
keep-alive保持组件状态的方法
这篇文章主要介绍了keep-alive保持组件状态的方法，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下
2020-12-12
vue 中directive功能的简单实现
本篇介绍directive的简单实现，主要学习其实现的思路及代码的设计，需要的朋友参考下吧
2018-01-01
vue父子组件相互通信方法示例梳理总结
这篇文章主要为大家介绍了vue父子组件相互通信方式示例梳理总结，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
vuecli+AXdownload下载组件封装 +css3下载悬浮球动画效果
当触发下载功能的时候,会触发一个下载动画,下载悬浮球会自动弹出,并且闪烁提示有新的下载任务直到下载任务完场提示,接下来通过本文介绍vuecli+AXdownload下载组件封装 +css3下载悬浮球动画效果,需要的朋友可以参考下
2024-05-05
Vue预渲染：prerender-spa-plugin生成静态HTML与vue-meta-info更新meta
Vue.js中,prerender-spa-plugin和vue-meta-info插件的结合使用,提供了解决SEO问题的方案,prerender-spa-plugin通过预渲染技术生成静态HTML,而vue-meta-info则能动态管理页面元数据,本文将探讨如何使用这两个工具优化Vue.js项目的SEO表现,包括安装、配置及注意事项
2024-10-10