Vue 组件化基本使用详情
前言：
有时候有一组html结构的代码，并且这个上面可能还绑定了事件。然后这段代码可能有多个地方都被使用到了，如果都是拷贝来拷贝去，很多代码都是重复的，包括事件部分的代码都是重复的。那么这时候我们就可以把这些代码封装成一个组件，以后在使用的时候就跟使用普通的html元素一样，拿过来用就可以了。
1、什么叫做组件化
vue.js 有两大法宝，一个是数据驱动，另一个就是组件化，那么问题来了，什么叫做组件化，为什么要组件化？接下来我就针对这两个问题一一解答，所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。 因为组件是资源独立的，所以组件在系统内部可复用，组件和组件之间可以嵌套，如果项目比较复杂，可以极大简化代码量，并且对后期的需求变更和维护也更加友好。
2、基本使用
<div id="app">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<script>
// 定义一个名为 button-counter 的新组件
Vue.component('ButtonCounter', {
data: function () {
return {
count: 0
}
},
template: '<button @click="count++">点击了{{ count }}次</button>'
})
const app = new Vue({
el: "#app",
data: {
message: "hello"
}
})
</script>
以上我们创建了一个叫做button-counter的组件，这个组件实现了能够记录点击了多少次按钮的功能。后期如果我们想要使用，就直接通过button-counter使用就可以了。然后因为组件是可复用的Vue实例，所以它们与new Vue接收相同的选项，例如data、computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。
另外需要注意的是：组件中的data必须为一个函数！
我们来看下实现的效果：
我们上面使用了3次button-counter组件，所以页面会显示3个，并且每个组件都会各自独立维护它的 count，因为你每用一次组件，就会有一个它的新实例被创建。每个实例可以维护一份被返回对象的独立的拷贝，这就是我们data中使用函数的原因
到此这篇关于Vue 组件化基本使用详情 的文章就介绍到这了,更多相关Vue 组件化使用 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue实现秒杀倒计时组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
这篇文章主要介绍了vue中使用路由改浏览器标题和图标，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要为大家详细介绍了vue3.0手动封装分页组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
今天小编就为大家分享一篇Vue根据条件添加click事件的方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要给大家介绍了在vue中如何通过iframe方式加载本地的vue页面的解决方法，文中有详细的解决流程,需要的朋友可以参考下2023-06-06
今天小编就为大家分享一篇基于axios 的responseType类型的设置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
Vue解决echart在element的tab切换时显示不正确问题
这篇文章主要介绍了Vue解决echart在element的tab切换时显示不正确问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了vue3优雅的使用element-plus的dialog,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要介绍了Vue读取本地静态文件json的2种方法以及优缺点说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要为大家详细介绍了最基础的vue.js双向绑定操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
最新评论