浅谈Vue下的components模板
程序员文章站
2022-12-21 20:08:46
浅谈Vue下的components模板在我们越来越深入Vue时，我们会发现我们对HTML代码的工程量会越来越少，今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用 我们先来简单的写一段components代码(局部方法创造模板)
浅谈vue下的components模板
在我们越来越深入vue时，我们会发现我们对html代码的工程量会越来越少，今天我们来谈谈vue下的 components模板的 初步使用方法与 应用
我们先来简单的写一段components代码
(局部方法创造模板)
<div id="app">
<haha></haha>
</div>
/*
这是最简单常用的一种创造模板方法，局部方法创造模板
要注意,局部模板 的作用范围 只在 相对的vue对象 范围内
比如 这个例子, <haha></haha>的范围 只在 <div id="app"> </div>内
因为 haha 挂载在 vm的components下 而 vm挂载的 对应节点是 id=app的 div上
*/
let vm = new vue({
el:"#app",
data:{
},
components:{
"haha":{
template:"<div>哈哈哈<div>"
}
}
});
(共有模板/全局模板)，全局模板 顾名思义 肯定是 放在哪里都能用
<div id="app">
<hehe></hehe>
</div>
//这里使用vue.component原型方法来创造
vue.component(
"hehe",template:"<div>呵呵呵<div>"
);
let vm = new vue({
el:"#app",
data:{
},
components:{
//这里则不需要添加,因为 互不影响
}
});
其他方法：
<div id="app">
<xixi></xixi>
</div>
let xixi={
template:"<div>嘻嘻嘻<div>"
}
let vm = new vue({
el : "#app",
data{
},
components:{
xixi
}
});
(模板的继承)，全局模板 顾名思义 肯定是 放在哪里都能用
/*
我们来讲个最简单的 父亲，儿子 ，孙子的 例子
要注意以下几点：
1.先实例化对象vm
2.造出parent模板,并挂载在 vm的 conponents 下
3.造出 son 模板 并 挂载 在 父级 parent 的conponents下，并在 父级template属性中 包裹住自己的 模板名标签 ；同理 造出孙子标签
4.在html节点中添加 目标 根节点
（节点的顺序一定要书写正确）
*/
<div id="app">
<parent></parent>
</div>
//创建 孙子 模板
let grendson = {
template:"<div>孙子</div>"
}
//创建 儿子 模板
let son= {
template:"<son>儿子<grendson >孙子</grendson ></son>"
components:{
grendson
}
}
//创建 父亲 模板
let parent = {
template:"<div>父亲<son></son></div>"
components:{
son
}
}
//实例化vm对象
let vm = new vue({
el:"#app",
data:{
},
components:{
parent
}
});
感谢给位的阅读，本人在休闲之余整理了一些资料和视频，并刚刚创建了一个交流群：907694362 也是我之前刚开始学前端时候看的一些资料，希望对给位有所帮助，也祝各位在前端之路一帆风顺！！
上一篇： CSS3弹性盒子
下一篇： jdk的下载路径和环境变量的配置