vue11 组件初识
序
组件（component）是vue.js最强大的功能之一。组件的作用就是封装可重用的代码，通常一个组件就是一个功能体，便于在多个地方都能够调用这个功能体。 每个组件都是Vue的实例对象。 我们实例化的Vue对象就是一个组件，而且是所有组件的根组件。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<cow></cow>
<local1></local1>
</div>
<div id="test">
<cow></cow>
</div>
</body>
<script>
//创建组件
var mycompoonet=Vue.extend({
template:"<button @click='count++'>自己加{{count}}全局哦</button>",
data:function(){
// data要返回json
return{count:0}
}
})
Vue.component('cow',mycompoonet);
var wm = new Vue({
el:"#app",
data:{
},
components:{
"local1":{
template:`<div><div>本地多行</div>
<div>2</div></div>`
}
},
})
var wm = new Vue({
el:"#test",
data:{}
})
</script>
</html>
关键代码
//创建组件
var mycompoonet=Vue.extend({
template:"<button @click='count++'>自己加{{count}}全局哦",
data:function(){
// data要返回json
return{count:0}
}
})
Vue.component('cow',mycompoonet);
实现效果
本文作者：冥天肝
本文链接：https://www.cnblogs.com/wengming/p/16785631.html
版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构