大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
前言
有时候有一组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
中使用函数的原因
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/166101.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...