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开发拖拽进度条滑动组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
下面小编就为大家分享一篇vue实现提示保存后退出的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
vue中使用cookies和crypto-js实现记住密码和加密的方法
这篇文章给大家介绍一下关于vue中使用cookies和crypto-js如何实现密码的加密与记住密码，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。2018-10-10
本文给大家分享了vue实现登录后页面跳转到之前页面的一个功能，有这方便需要的朋友学习参考下吧。2018-01-01
以简单的树形组件为案例,实现在组件中递归组件,下面这篇文章主要给大家介绍了关于Vue实现递归组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
这篇文章主要为大家详细介绍了Vue异步组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
当一个组件被定义,data必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例,下面这篇文章主要给大家介绍了关于vue data中return使用,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了详解Element-UI中上传的文件前端处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要介绍了vue 修改 data 数据问题并实时显示操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要为大家介绍了Vue之生命周期函数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
最新评论