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

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

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

(局部方法创造模板)

<div id="app"><haha></haha></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}});

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

<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}});

总结

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