下面说说vue创建组件的几种方式。相信朋友们也应该密切关注这个话题。现在给朋友们说说vue创建组件的几种方式。边肖还收集了关于用vue创建组件的几种方法的相关信息。我希望你看到后会喜欢。
创建vue组件的目的是拆分vue实例的代码量，通过不同的组件找到不同的功能。下面是vue创建组件的三种方式。有需要的朋友可以参考一下，希望能帮到你。
方法1:使用Vue.extend创建全局Vue组件。
示例：
var com1=Vue.extend({
Template: 'h3这是一个使用Vue.extend创建的组件/h3' //通过Template属性，指定了组件要显示的HTML结构。
})使用Vue.component ('component name '，创建的component对象)创建Vue组件时，名称以首字母命名。引用组件时，将大写字母改为小写字母，并在两个单词前使用-connection；参数1:一个标签用来介绍组件，参数2:模板是组件显示的HTML内容。
div id='应用程序'
！-如果要使用一个组件，直接将组件的名称以HTML标签的形式引入页面，就可以-
真菌1/真菌1
/div
脚本
Vue.component('mycom1 '，Vue.extend({
Template: 'h3这是使用Vue.extend创建的组件/h3 '
}))
//创建Vue实例并获取视图模型
var vm=new Vue({
el: '#app '，
数据： {}，
});
/script的结果是：
方法二：直接使用Vue.component。
身体
div id='应用程序'
！-以标签的形式介绍您自己的组件-
真菌2/真菌2
/div
脚本
Vue.component('mycom2 '，{
模板：`div
H3这是一个直接使用Vue.component /h3创建的组件
span123/span
/div '
})
//创建Vue实例并获取视图模型
var vm=new Vue({
el: '#app '，
数据： {}，
方法： {}
});
/脚本
/正文结果：
方法三：使用Vue.component，在受控的#app之外，使用template元素。
在受控的#app外部，使用template元素定义组件的HTML模板结构。
身体
div id='app2 '
登录/登录
真菌3/真菌3
登录/登录
/div
模板id='tmpl '
差异
H1这是通过模板元素在外部定义的组件结构。这样，有代码的只能提示和高亮显示/h1。
H4很好用，还不错！/h4
/div
/模板
模板id='tmpl2 '
H1这是一个私人登录组件/h1
/模板
脚本
Vue.component('mycom3 '，{
template: '#tmpl '，
})
//创建Vue实例并获取视图模型
var vm2=新Vue({
el: '#app2 '，
数据： {}，
方法： {}，
过滤器： {}，
指令： {}，
Components: {//定义实例内部私有组件的。
登录： {
模板： '#tmpl2 '
}
},
})
/脚本
/body输出结果：
注：无论如何创建组件，组件的模板都指向内容，并且只有一个根元素。
推荐：《vue.js教程》以上是在vue中创建组件的几种方式的详细内容。请多关注php中文网的其他相关文章！
来源：php中文网站
标签：
免责声明：本文由用户上传，与本网站立场无关。财经信息仅供读者参考，并不构成投资建议。投资者据此操作，风险自担。 如有侵权请联系删除！