Vue通用组件的封装

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue通用组件的封装相关的知识,希望对你有一定的参考价值。

参考技术A 最近项目做完了,抽出一些时间做一些总结,主要是针对于可复用组件的解耦和样式复用。

为了解耦,子组件本身就不能生成数据。即使生成了,也只能在组件内部运作,不能传递出去,下面是在一些较复杂的场景中,对props传递的参数加一些验证,也是方便如果是数据类型不符合可以直接抛出异常。

props传入参数,不建议对它进行操作,如果要操作,请先在子组件深拷贝。如果你是用JSON.stringify, JSON.parse方法深拷贝需注意:

比如某些子组件的click事件,避免高耦合,逻辑最好放在父组件中,子组件只是一个承载体。

这样既降低耦合,保证子组件中数据和逻辑不会混乱。

现在有一个需求,在同一个子组件中,我在不同的场景需要用到不同的按钮,那么在封装组件的时候就不用去写按钮,只用在合适的未知留一个slot,把按钮的位置留出来,然后再父组件中写入:

这样一个具名插槽灵活地解决了不同场景同一组件不同配置的问题。

var.less里面可以装所有的公共样式:

Vuejs组件

一、概念

①组件就是对局部视图的封装,组件思想就是把一个很大的复杂的 Web 页面视图给拆分成一块一块的组件视图,然后利用某种特定的方式把它们组织到一起完成完整的 Web 应用构建。

②目前主流的前端框架angular,react、vue都是组件化开发思想,vue中的组件思想借鉴于react

③利用组件可以提高开发效率,增强可维护性

二、使用

①全局组件(通用组件):一般把网页中特殊的公共部分注册为全局组件,比如轮播图、tab选项卡、分页、通用导航等

    <div id="app">
        <my-header></my-header>
        <my-main></my-main>
        <my-footer></my-footer>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        // 组件的名字,不要使用原生的标签名称
        Vue.component(\'my-header\',{
            template:\'<header><h1>头部组件</h1></header>\'
        });
        Vue.component(\'my-main\',{
            template:`
            <div>
                <ul>
                    <li>轮播图</li>
                    <li>产品内容</li>
                    <li>商品展示</li>
                </ul>
            </div>
            `
        });
        Vue.component(\'my-footer\',{
            template:\'<footer><h1>底部组件</h1></footer>\'
        });
        new Vue({
            el:\'#app\',
            data:{

            }
        });

②局部组件(子组件):一般是注册一些非通用的

    <div id="app">
        <my-child></my-child>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:\'#app\',
            data:{

            },
            components:{
                myChild:{
                    template:\'<div><h3>子组件</h3></div>\'
                },
            },
        });
    </script>

③组件与组件之间是相互独立的:

  • 默认情况下,组件与组件之间无法进行跨组件数据访问,父子组件都不行
  • 组件就是一种特殊的vue实例,不需要实例化,它管理自己的template,模板组件的template必须只有一个根节点
  • 在组件中,也可以配置类似于vue实例中的一些选项资源,比如data、methods、computed等等

④组件中的data必须是函数

  • 组件的data必须是函数(手动new出来的Vue实例还是普通的对象)
  • 函数内部返回一个对象
  • 如下面这个例子,如果data不是一个函数,则点击其中一个会影响到其他的两个,不能相互独立开来
    <div id="app">
        <demo></demo>
        <demo></demo>
        <demo></demo>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        Vue.component(\'demo\',{
            data:function(){
                return{
                    count:0
                }
            },
            template: \'<button v-on:click="count++">You clicked me {{ count }} times.</button>\'
        });
        new Vue({
            el:\'#app\',
            data:{

            }
        });
    </script>

 ⑤父子组件之间的数据传递:父组件通过prop向子组件传递数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model=\'message\' placeholder="请输入">
        <button @click=\'add\'>添加</button>
        <!-- 展示组件 -->
        <item-list :items=\'items\'></item-list>
    </div>
    <script>
        Vue.component(\'item-list\',{
            props:{
                items:{
                    type:Array
                }
            },
            template:
            `
                <div>
                    <ul>
                        <li v-for="(item, index) in items" :key="index">{{item}}</li>
                    </ul>
                </div> 
            `
        })
        const app = new Vue({
            el:\'#app\',
            data() {
                return {
                    message:\'\',
                    items:[\'HTML\',\'JS\',\'CSS\']
                }
            },
            methods: {
                add(){
                    this.items.push(this.message);
                    this.message = \'\';
                }
            }
        })
    </script>
</body>
</html>

 

三、Vue组件化的理解

①定义:组件是可复用的 Vue 实例,准确讲它们是VueComponent的实例,继承自Vue。

②优点:从上面案例可以看出组件化可以增加代码的复用性、可维护性和可测试性

③使用场景:什么时候使用组件?以下分类可作为参考

  • 通用组件:实现最基本的功能,具有通用性、复用性,例如按钮组件、输入框组件、布局组件等。
  • 业务组件:它们完成具体业务,具有一定的复用性,例如登录组件、轮播图组件。
  • 页面组件:组织应用各部分独立内容,需要时在不同页面组件间切换,例如列表页、详情页组件 

④如何使用组件

  • 定义:Vue.component(),components选项,sfc
  • 分类:有状态组件,functional,abstract
  • 通信:props,$emit()/$on(),provide/inject,$children/$parent/$root/$attrs/$listeners
  • 内容分发:<slot>,<template>,v-slot
  • 使用及优化:is,keep-alive,异步组件

⑤组件的本质

  • vue中的组件经历如下过程 组件配置 => VueComponent实例 => render() => Virtual DOM=> DOM
  • 所以组件的本质是产生虚拟DOM

如何使用组件

以上是关于Vue通用组件的封装的主要内容,如果未能解决你的问题,请参考以下文章

Vue通用组件的封装

源码时代前端干货分享|从零动手封装一个通用的vue按钮组件

基于Vue的简单通用分页组件

sign-canvas 一个基于canvas开发,封装于Vue组件的通用手写签名板(电子签名板),支持pc端和移动端;

Vue动态加载异步组件

vue中如何编写可复用的组件?