vue封装自定义组件

最新推荐文章于 2023-09-18 20:49:24 发布

Panda-6

最新推荐文章于 2023-09-18 20:49:24 发布

阅读量1.4k

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_48949881/article/details/122887915

版权

你封装过组件吗？？
说一下组件封装？？？？
你在项目中是如何封装组件的？？？？？
…

以上问题是面试官，最常问到的问题？那么你应该如何回答呢？

答：我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组件)、list(上拉加载更多功能组件)）

首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性低等问题。

使用组件的好处

组件是可以复用性的
易于维护
有封装性，易于使用
大型项目中降低组件之间重复性

全局组件

引用全局组件my-header

<body>
<div id="main1">
<!-- 正常模板解析的时候，不会将自定义标签解读出来，而是将自己定义组件里的参数解读出来，也就是下面template中的h1标签 -->
<my-header></my-header>
</div>
<div id="main2">
<!-- 自定义组件具有复用性 -->
<my-header></my-header>
</div>
<div id="main3">
<my-header></my-header>
</div>
</body>

注册全局组件my-header

//全局组件：在任何地方，任何方式，任何地点都可以使用的标签组件
vue.component("my-header", {
   
// h1标签是我们在自定义主键里面写的参数的标签
template: '<h1>标题{
   {msg}}</h1>',
data(){
   
   return {
   msg:100}
}
})
new Vue({
   
el: '#main'
});
new Vue({
   
el: '#main2'
});
new Vue(

最低0.47元/天解锁文章

Panda-6

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue封装自定义组件

你封装过组件吗？？说一下组件封装？？？？你在项目中是如何封装组件的？？？？？…以上问题是面试官，最常问到的问题？那么你应该如何回答呢？答：我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组.
复制链接

扫一扫