2022年02月17日整理发布：浅析vue创建组件的几种方式

下面说说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中文网站

　　免责声明：本文由用户上传，与本网站立场无关。财经信息仅供读者参考，并不构成投资建议。投资者据此操作，风险自担。 如有侵权请联系删除！