vue组件化的理解_什么是前端组件化
2023-06-13 09:12:51 时间
大家好,又见面了,我是你们的朋友全栈君。
前言
有时候有一组html
结构的代码,并且这个上面可能还绑定了事件。然后这段代码可能有多个地方都被使用到了,如果都是拷贝来拷贝去,很多代码都是重复的,包括事件部分的代码都是重复的。那么这时候我们就可以把这些代码封装成一个组件,以后在使用的时候就跟使用普通的html
元素一样,拿过来用就可以了。
基本使用
<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
中使用函数的原因
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/164858.html原文链接:https://javaforall.cn
相关文章
- vue 修改引入组件的样式_vue子组件的子组件布局
- 【Vue Conf 2021】现场参加 Vue Conf 2021 是怎样的一种体验(上)
- Vue 组件间的通信方式
- todomvc项目_reactive vue
- vue子组件传值给父组件_子组件调用父组件中的方法
- 你知道import Vue from 'vue' 吗?
- Vue中使用axios请求后端接口
- vue与jquery混用_vue怎么使用jquery
- VUE组件封装_vue使用组件
- VUE组件封装_vue组件内部双向绑定
- vue项目封装组件_前端组件封装
- vue封装组件思路_前端封装组件
- vue 父组件调用子组件的函数_vue子组件触发父组件方法
- vue子组件向父组件传值的三种方式_vue子组件修改父组件值
- vue 调用子组件方法失败_Vue子组件调用父组件的方法及常见问题「建议收藏」
- 【Web技术】1445- 如何使用 Hooks 写出高质量的 React 和 Vue 组件?
- vue中父组件传值给子组件,父组件值改变,子组件不能重新渲染[通俗易懂]
- 【实用】Vue线上环境禁止打印console.log
- Vue非父子组件传值之事件总线(eventbus)的使用方式
- Vue中使用XML和JSON格式互转插件
- Vue CLI 2 脚手架 TabBar 组件封装
- Vue组件数据通信方案总结
- 30秒实现Vue吸顶效果
- 4. 「vue@2.6.11 源码分析」new Vue() 整体流程和组件渲染之前的准备工作
- Vue如何连接Redis(vue怎么连接Redis)
- 构建基于Vue与Redis的高性能缓存系统(VUE redis缓存)