浅析Vue下的components模板使用及应用

2023-08-05 08:30:04 73

Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue.js的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。

在我们越来越深入Vue时，我们会发现我们对HTML代码的工程量会越来越少，今天我们来谈谈Vue下的components模板的初步使用方法与应用

我们先来简单的写一段components代码

(局部方法创造模板)

/* 这是最简单常用的一种创造模板方法，局部方法创造模板要注意,局部模板的作用范围只在相对的vue对象范围内比如这个例子,的范围只在

内因为haha挂载在vm的components下而vm挂载的对应节点是id=app的div上 */ letvm=newVue({ el:"#app", data:{ }, components:{ "haha":{ template:"

哈哈哈

" } } });

(共有模板/全局模板)，全局模板顾名思义肯定是放在哪里都能用

//这里使用Vue.component原型方法来创造 Vue.component( "hehe",template:"

呵呵呵

" ); letvm=newVue({ el:"#app", data:{ }, components:{ //这里则不需要添加,因为互不影响 } });

其他方法：

letxixi={ template:"

嘻嘻嘻

" } letvm=newVue({ el:"#app", data{ }, components:{ xixi } });

(模板的继承)，全局模板顾名思义肯定是放在哪里都能用

/*
我们来讲个最简单的父亲，儿子，孙子的例子
要注意以下几点：
1.先实例化对象vm
2.造出parent模板,并挂载在vm的conponents下
3.造出son模板并挂载在父级parent的conponents下，并在父级template属性中包裹住自己的模板名标签；同理造出孙子标签
4.在HTML节点中添加目标根节点
（节点的顺序一定要书写正确）
*/

//创建孙子模板 letgrendson={ template:"

孙子

" } //创建儿子模板 letson={ template:"儿子孙子" components:{ grendson } } //创建父亲模板 letparent={ template:"

父亲

" components:{ son } } //实例化vm对象 letvm=newVue({ el:"#app", data:{ }, components:{ parent } });

总结

以上所述是小编给大家介绍的Vue下的components模板使用及应用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

浅析Vue下的components模板使用及应用

热门推荐

随机推荐