html开发时使用js封装Vue组件（二）

最新推荐文章于 2024-04-13 02:02:18 发布

爱学习的ljz

最新推荐文章于 2024-04-13 02:02:18 发布

阅读量2.4k

点赞数 5

分类专栏： # Vue 前端文章标签： vue html

本文链接：https://blog.csdn.net/qq_40600414/article/details/108246826

版权

前端同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

Vue

5 篇文章 0 订阅

订阅专栏

需求

最近项目组里有个项目想使用vue开发，但是不想搭建环境，因此就采用引入js的方式来进行开发，然后有很多页面需要用到一些公共的部分，因此想让我开发一些公共组件，使用Vue注册组件都是在webpack管理的项目下进行的封装组件，因此对无node搭建环境的情况下不太了解如何封装公共组件。
在重新阅读了Vue官网的组件注册之后，产生了一个想法，可以在js中注册好Vue的全局组件，然后哪个页面需要用到该组件就引用该js文件，将组件内dom模板的定义也写在了js文件中。
一开始就通过这样的方式注册了很多公共组件，但后来需求又复杂起来，需要用到element ui组件库，我需要在对element ui的一部分组件进行封装，我一开始试了一下，页面什么都不显示，我以为封装的公共组件不能引用其他的组件库组件，有点不死心吧，最后进行了改善，最终成功了。
以下是实现过程：

实现过程

1.首先创建一个js文件来封装需要的公共组件

tmp-tabs.js

//定义组件注册的模板template
var tabs = `<div >
                  <el-tabs v-model="index"  @tab-click="handleClick">
                    <el-tab-pane v-for="(item,i) in list" :label="item.label" :name="i">{{item.content}}</el-tab-pane>
                  </el-tabs>
            </div> `;
//Vue定义组件
var template_tabs = Vue.extend({
        template:tabs,
        //这里的data与vue对象的data类似，只不过组件中的data必须是函数的形式
        data(){
            return {
                index:0,
            }
        },
    //这里的methods与vue对象的methods一样，可以在这里定义组件的函数 没用到也可以不写
        methods:{
            handleClick:function(tab,event){
                console.log(tab,event);
            }
        },
        //props用来接收外部参数的
        props:['index','list'],
});

//Vue注册全局组件
Vue.component('tem-tabs',template_tabs);

我上面的组件是对elemnt ui 的el-tabs的简单封装，只是为了做个例子，在定义的组件中我设置了两个需要传入的参数 index与list数组, index是设置标签页默认初始化的标签页面，我在封装的组件设置了为0，如果传入index参数，就会使用传入的index，list是一个数组集合，里面封装的对象需要有label属性，是标签页的名字，还有就是content属性，是标签页的内容。

2.创建一个index.html来进引用公共组件来进行展示

Component.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义组件测试</title>

    <link rel="stylesheet" href="css/element-ui.css">
    <script src="js/vue.min.js"></script>
    <script src="js/element-ui.js"></script>

    <script src="js/template/tem-tabs.js"></script>   <!--引入定义组件的技术文件-->

</head>
<body>
    <div id="app">
        <tem-tabs :index="1" :list="parentList" ></tem-tabs>
    </div>
    <script>
        var myVue = new Vue({
            el: '#app',
            data:{
                parentList:[
                    {label:'玄幻小说',content:'圣墟'},
                    {label:'武侠小说',content:'雪中悍刀行'},
                    {label:'都市小说',content:'天才相师'},
                    {label:'鬼怪小说',content:'盗墓笔记'},
                ],
            },
            methods:{
                handleClick:function (tab,event) {
                       console.log(tab);
                }
            }
        });
    </script>
</body>
</html>

效果图
在这里插入图片描述
我封装的组件是根据传入的list集合动态生成标签页，list集合的元素的label属性是标签页名称，content属性是标签页内容，传入index是默认初始化时显示哪个标签页的内容，如果不传的话默认为第一个标签页内容。

以上demo我放在了我的github上，我的demo github地址

在js文件中对组件的模板进行封装的时候不要使用template标签，在我定义模板的标签时最外层用了template标签，结果什么错也不报，页面不显示任何东西，模板最外层只能有一个父级dom元素，最外层最好建议用div包起来就好，千万不能最外层有多个父级dom元素，否则到时候会可能只显示第一个。

如果觉得我的博客对你有所帮助，希望动动小手点个赞。

爱学习的ljz

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
html开发时使用js封装Vue组件（二）

需求最近项目组里有个项目想使用vue开发，但是不想搭建环境，因此就采用引入js的方式来进行开发，然后有很多页面需要用到一些公共的部分，因此想让我开发一些公共组件，使用Vue注册组件都是在webpack管理的项目下进行的封装组件，因此对无node搭建环境的情况下不太了解如何封装公共组件。在重新阅读了Vue官网的组件注册之后，产生了一个想法，可以在js中注册好Vue的全局组件，然后哪个页面需要用到该组件就引用该js文件，将组件内dom模板的定义也写在了js文件中。一开始就通过这样的方式注册了很多公共组件
复制链接

扫一扫