精华内容
下载资源
问答
  • 主要介绍了Angularjs 创建可复用组件实例代码的相关资料,需要的朋友可以参考下
  • 安卓开发之创建可复用的UI组件:swift 创建复用组件 Android平台提供了广泛的UI可视组件---widget把这些小的可视的构件组合到一起就可以给用户提供复杂而有用的界面但是应用程序经常需要一些高级可视组件要满足这样的...
  • Vue 可复用组件

    2020-06-22 10:15:24
    不同于根组件,同一个可复用组件,可以在同一个应用中多次使用。 2、可复用UI组件的创建 可复用组件在构建选项上与全局组件基本一致(除了一些特殊设定,后续会讲)。 可复用组件可以像标签一些在模板中使用,Vue ...

    1、什么是可复用的UI组件?

    vue 中,我们可以通过 new Vue 来创建一个组件,不过通常它是作为整个应用的顶层根组件存在的,我们还可以通过另外的方式来注册一个更为通用的组件。不同于根组件,同一个可复用组件,可以在同一个应用中多次使用。

    在这里插入图片描述

    2、可复用UI组件的创建

    可复用组件在构建选项上与全局组件基本一致(除了一些特殊设定,后续会讲)。
    可复用组件可以像标签一些在模板中使用,Vue 会在解析过程中处理它们。

    2-1、全局定义

    Vue.component('组件名称', {组件选项})
    

    可以在任意位置(多个不同的 Vue 应用中)使用。

    2-2、局部定义

    new Vue({
      ...,
      components: {
      	'组件名称': {组件选项}	
    	}
    })
    

    局部组件只能在其定义的组件内使用,不能在其子组件内部使用。

    3、组件内部私有数据(状态)

    可复用组件的 data 必须是函数,且该函数必须返回一个对象作为组件最终的 data

    4、组件外部传入数据

    如同一个函数一样,函数除了可以定义内部私有变量,有时候为了提高函数的复用性,我们通过会通过参数来接收外部传入的数据。组件也可以。

    4-1、props

    组件中内部私有数据存储中组件 data 中,通过外部传入的数据,则通过 props 选项接收。

    首先,组件内部通过 props 来定义可以接收的数据名称,就像是函数的形参。

    然后,在使用该组件的时候可以通过标签属性的方式进行传参(可配合 v-bind 传入表达式)。

    注意事项

    • 如果传入的 props 值为一个表达式,则必须使用 v-bind
    • 组件中的 dataprops 数据都可以通过组件实例进行直接访问
    • data 中的 keyprops 中的 key 不能冲突

    5、组件通信

    5-1、作用域隔离

    为了保证数据安全性(传入的数据通常会在其它组件中也有使用),Vue 不推荐我们在组件内部直接修改传入的数据。

    5-2、父组件到子组件内部的数据传递

    父组件通过上述提到的 props 向一个子组件内部传递数据。

    5-3、子组件内部到外部的数据传递

    5-3-1、$emit()

    vue 为每个组件对象提供了一个内置方法 $emit ,它等同于自定义事件中的 new Event,trigger

    this.$emit('自定义事件名称', 事件数据)
    
    • 事件数据就是中触发事件的同时携带传递的数据 - event

    • 父级在使用该组件的过程中,可以通过 @事件名称 来注册绑定事件函数

    • 事件函数的第一个参数就是事件数据

    5-4、数据双向绑定

    虽然并不推荐在组件内部修改 props ,但是,有的时候确实希望组件内部状态变化的时候改变 props ,我们可以通过子组件触发事件,父级监听事件来达到这个目的,不过过程会比较繁琐,vue 提供了一些操作来简化这个过程。

    5-4-1、v-model

    v-modelvue 提供的一个用于实现数据双向绑定的指令,用来简化 props 到 datadata 到 props 的操作流程。

    5-4-1-1、model 选项

    prop 指定要绑定的属性,默认是 value

    event 指定要绑定触发的事件,默认是 input 事件

    5-4-2、.sync

    通过 v-model 来进行双向绑定,会给状态维护带来一定的问题,因为修改比较隐蔽,同时只能处理一个 prop 的绑定,我们还可以通过另外一种方式来达到这个目的。

    5-4-2-1、update:[prop]

    这里事件名称要使用 update 加上 prop 名称 的格式

    5-5、ref 与 $refs

    ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件。

    6、插槽

    默认情况下,组件模板解析后会替换整个组件内容,如果我们想在组件引用被包含的内容,可以通过 vue 提供的内置组件 slot 来获取。

    6-1、slot

    Vue 提供了一个内置的组件 <slot>,用于在组件模板内定义插槽。解析过程中,会被该组件嵌套的子组件(元素)对应的内容所替换。

    6-2、具名插槽

    使用内置组件 templatev-slot 指令进行配置,用来命名插槽,在组件模板中,通过 <标签 v-slot:插槽名称> 来使用。

    • 插槽名称默认为 default ,可以省略。

    6-3、作用域插槽

    组件内部与组件包含的内容属于不同的作用域(被包含的内容是组件父级下的作用域)。

    组件到父级作用域下的子级通信。

    • 组件内部通过 slotattributes 进行数据传递。
    • 子级通过 v-slot 指令的值进行接收。
    // 组件内部
    <slot v-for="user of users" :user="user"></slot>
    
    // 组件外部子级
    <template v-slot:default="data">
      <p>用户的姓名: {{data.user.username}}</p>
    </template>
    

    7、props 验证

    组件的 props 就是组件的参数,为了确保传入的数据在可控的合理范围内,我们需要对传入的 props 的值类型进行必要的验证。

    Vue.component('my-component', {
      props: {
        // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
        propA: Number,
        // 多个可能的类型
        propB: [String, Number],
        // 必填的字符串
        propC: {
          type: String,
          required: true
        },
        // 带有默认值的数字
        propD: {
          type: Number,
          default: 100
        },
        // 带有默认值的对象
        propE: {
          type: Object,
          // 对象或数组默认值必须从一个工厂函数获取
          default: function () {
            return { message: 'hello' }
          }
        },
        // 自定义验证函数
        propF: {
          validator: function (value) {
            // 这个值必须匹配下列字符串中的一个
            return ['success', 'warning', 'danger'].indexOf(value) !== -1
          }
        }
      }
    })
    

    8、其它 props 相关知识点

    8-1、非 prop 特性

    一个非 prop 特性是指传向一个组件,但是该组件并没有相应 prop 定义的特性,这些 props 会被自动添加到组件的根元素上。

    8-2、替换/合并已有的特性

    默认情况下,非prop 特性的属性会覆盖组件根元素上同名的内容,但是针对 styleclass 有特殊的处理,它们会合并(同名样式还是会覆盖)。

    8-3、禁用特性继承

    如果你不希望组件的根元素继承特性,你可以在组件的选项中设置 inheritAttrs: false,我们可以通过组件的 this.$attrs 来获取这些属性。

    注意 inheritAttrs: false 选项不会影响 styleclass 的绑定。

    展开全文
  • 主要给大家介绍了关于Vue.js的复用组件开发流程的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 封装原生html复用组件

    2021-04-21 15:11:05
    封装原生html复用组件 写好的组件页面用object或者iframe这两个标签中任意一个引入即可; <object class="obj" data="./test.html"></object> // frameborder 引入组件的边框 <iframe class="obj1" ...

    封装原生html复用组件

    写好的组件页面用object或者iframe这两个标签中任意一个引入即可;

    <object class="obj" data="./test.html"></object>
    
    // frameborder 引入组件的边框
    <iframe class="obj1" src="./test.html" frameborder="0"></iframe>
    
    展开全文
  • 在编写组件时,记住是否要复用组件有好处。一次性组件跟其它组件紧密耦合没关系,但是可复用组件应当定义一个清晰的公开接口。 Vue 组件的 API 来自三部分 - props, events 和 slots : Props 允许外部环境传递...

    在编写组件时,记住是否要复用组件有好处。一次性组件跟其它组件紧密耦合没关系,但是可复用组件应当定义一个清晰的公开接口。

    Vue 组件的 API 来自三部分 - props, events 和 slots :

    • Props 允许外部环境传递数据给组件

    • Events 允许组件触发外部环境的副作用

    • Slots 允许外部环境将额外的内容组合在组件中。

    使用 v-bind 和 v-on 的简写语法,模板的缩进清楚且简洁:

    <my-component
      :foo="baz"
      :bar="qux"
      @event-a="doThis"
      @event-b="doThat"
    >
      <img slot="icon" src="...">
      <p slot="main-text">Hello!</p>
    </my-component>
    
    展开全文
  • 这里总结一下,在使用Vue时,几种复用组件的方式。 场景 表单验证是一个经常碰到的场景,表单内的不同组件常常需要有相同的验证逻辑,比如验证值非空,这里就按照这个场景来举几个例子。 使用Mixin Vue提供了 “混入...

    前言

    大多数前端框架都提供了组件化的能力,在日常开发中,我们经常会用组件去封装自己的业务逻辑,那么如何去写一个复用率高的组件就变成了一个重要的技巧。这里总结一下在使用Vue时几种复用组件的方式。

    场景

    表单验证是一个经常碰到的场景,表单内的不同组件常常需要有相同的验证逻辑,比如验证值非空,这里就按照这个场景来举几个例子。

    使用Mixin

    Vue提供了 “混入” 这个方案来达到一个复用的效果,所以我们可以写一个表单校验相关的mixin,并且混入到各个组件中去。

    // validate-mixin.js
    const validateMixin = {
        props: {
            required: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            validate(value) {
                if (this.required && (value === undefined || value === null || value === '')) {
                    this.isError = true;
                } else {
                    this.isError = false;
                }
            }
        }
    };
    export default validateMixin
    

    然后我这边有两个组件,分别是文本输入框和数字输入框

    // input.js
    <template>
        <div id="ka-input">
            <input type="text" @input="onInput">
            <p v-show="isError" class="err-msg"> {{errMsg}} </p>
        </div>
    </template>
    
    <script>
    import validateMixin from '@/common/mixin/validate-mixin.js'
    
    export default {
        name: 'KaInput',
        mixins: [validateMixin],
        methods: {
            onInput(e) {
                this.validate(e.target.value);
            }
        },
        data() {
            return {
                isError: false,
                errMsg: '不能为空'
            };
        }
    };
    </script>
    
    
    // number-input.js
    <template>
        <div id="ka-number-input">
            <input type="number" @input="onInput">
            <p v-show="isError" class="err-msg"> {{errMsg}} </p>
        </div>
    </template>
    
    <script>
    import validateMixin from '@/common/mixin/validate-mixin.js'
    
    export default {
        name: 'KaNumberInput',
        mixins: [validateMixin],
        methods: {
            onInput(e) {
                this.validate(e.target.value);
            }
        },
        data() {
            return {
                isError: false,
                errMsg: '不能为空'
            };
        }
    };
    </script>
    
    
    

    混入的优点在于使用简单,将共同的属性或者方法封装在这个mixin对象之中,其他需要共享该属性或者方法的组件只要引入这个mixin即可。
    但是从上述代码中可以看出,混入有几个明显的缺点。

    1. 模板的内容需要维护在各个组件当中,得不到复用。
    2. 属性和方法放在mixin中,后期不方便他人维护,需要手动梳理源组件和混入对象之间的逻辑。
    3. mixins会导致属性冲突,并且相同名称的生命周期会被合并,这可能带来冗余的逻辑,同时也可以看出mixin的侵入性较强。

    实际上在开发过程中,如何组织mixin的目录结构也是个问题,要区分是一个页面级别的mixin,还是部分页面的mixin,甚至是全站的mixin,划分不清楚会导致后期mixin的职能混乱,不利于代码维护。

    RenderLess

    renderLess 本意就是不渲染内容的组件,在Vue 中我们可以使用插槽来实现,和React中的HOC有异曲同工之妙。

    // validate-render-less.vue
    <template>
        <div class="validate-item">
            <slot name="wrapped" :validate="validate"></slot>
            <p v-show="isError" class="err-msg">{{ errMsg }}</p>
        </div>
    </template>
    <script>
    export default {
        data: () => {
            return {
                isError: false,
                errMsg: 'can not be null'
            };
        },
        props: {
            required: {
                type: Boolean,
                required: false
            }
        },
        methods: {
            validate(e) {
                const value = e.target.value;
                if (
                    this.required &&
                    (value === undefined || value === null || value === '')
                ) {
                    this.isError = true;
                } else {
                    this.isError = false;
                }
            }
        }
    };
    </script>
    
    

    上面这个模块本质上是一个vue组件,他有模板,有逻辑,并且利用插槽在模板中预留了一个“占位符”,其他组件可以往这里添加自己的内容。

    // input.js
    <template>
        <div id="ka-input">
            <r-l-validate :required="required">
                <template v-slot:wrapped="{ validate }">
                    <input type="text" @input="validate($event)" />
                </template>
            </r-l-validate>
        </div>
    </template>
    
    <script>
    import validate from '@/common/render-less/validate.vue';
    
    const kaInput = {
        props: {
            required: {
                type: Boolean
            }
        },
        name: 'ka-input',
        components: {
            'r-l-validate': validate
        }
    };
    
    export default kaInput;
    </script>
    
    
    // number-input.js
    <template>
        <div id="ka-number-input">
            <r-l-validate :required="required">
                <template v-slot:wrapped="{ validate }">
                    <input type="number" @input="validate($event)">
                </template>
            </r-l-validate>
        </div>
    </template>
    
    <script>
    import validate from '@/common/render-less/validate.vue'
    
    export default {
        name: 'KaNumberInput',
        props: {
            required: {
                type: Boolean,
                required: false
            }
        },
        components: {
            'r-l-validate': validate
        }
    };
    </script>
    
    

    使用render-less组件有这么几个优点。

    1. 可以复用模板的逻辑,公共的部分都可以提取到renderless中
    2. 不会出现命名冲突

    简单总结

    对于简单的场景,mixin可以解决大部分问题,但是要注意他的一些缺点;其他的场景下,如果需要复用模板,并且组件的逻辑较为复杂,那应该优先考虑使用render-less组件

    展开全文
  • 模型组件管理概念以及复用组件的方法 当模型的架构较为复杂,模型内部的模块非常多时候,十分有必要进行模型组件管理,分开建立各个子模型,然后进行合并管理。Matlab将这种建模方式成为基于组件的建模。这里是...
  • 将一个不可复用的组件改成清晰通用的可复用组件 class OneList extends React.Component { constructor(props) { super(props) this.state = { list: [], } } componentDidMount() { ...
  • Vue之组件(插槽slot与可复用组件

    千次阅读 2019-10-30 19:43:21
    (4)编写可复用组件 前言 前言及场景: 插槽概念在Vue中十分重要 在很多第三方的Vue模块或插件中都会大量使用插槽 作用:通过插槽slot可以更加方便的向子组件传递DOM元素,同时子组件使用插槽内容也十分简单,...
  • Vue注册复用组件

    2021-06-13 11:47:11
    结构如下 例如:注册Login为多次复用组件需要以下步骤 ...相当于从components下的index.js里引入所有需要复用组件 全部注册 现在就不用再在每个页面引入,然后注册了,可以在其他页面直接使用 ...
  • vue实现元素滑动到顶部固定效果的复用组件此例子为可直接复用组件模板js代码样式组件完整代码,在其他组件中引入后即可直接使用 此例子为可直接复用组件 模板 <template> <div ref="menu"> <...
  • 复用组件的价值在于高复用性,它更能将一个项目往高内聚、低耦合的方向发展。 1.组件命名------按组件功能命名; 2.组件内容------明确组件需要实现什么样的功能; 3.组件体积------越小越好维护,能拆就拆,按...
  • Vue 复用组件

    2018-01-30 23:16:03
    // 待复用组件 template> h1>组件Ah1> template> script> export default { name: 'navigator', data () { return { } } } 以下页面可以直接使用上述定义的组件 template> div> navigator>navigator> ...
  • Vue.js 是一套构建用户界面的渐进式框架。我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件
  • 讲登录页实现之前,我们可以先了解阿里提供的强大高复用组件 ProLayout组件,我们之前就用过了,主要去了解的是ProForm组件、ProTable组件这两个是用得最多的 默认umi是没有安装 我们来安装一下ProForm...
  • angular2抽取公共复用组件(模块间公用) 例如创建footer组件 - ng g c footer –module - footer.component.spec.ts (测试文件) - *footer.component.ts (ts组件文件) -footer.module.ts (模块文件) ...
  • angular2+ 复用组件

    千次阅读 2018-08-23 16:35:35
    一、新建SharedModule 一、新建公共组件 SqModelComponent 三、在其他模块使用的时候不用导入这些公共组件,只需要导入公共模块即可SharedModule 四、使用 有用文章: ...
  • vue刷新当前路由:router-view 复用组件时不刷新的3种解决方案总结
  • 每个组件都是一个完整的实例,组件的创建,组件间的通讯,组件如何更好的复用,以及整个的生命周期的钩子。所以你会发现它都是围绕组件展开的。 我们就来说说如何创建一个灵活的高复用组件。之前分享过一篇「slot...
  • vue复用组件 不刷新的解决方案

    万次阅读 2019-08-17 11:35:57
    vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。 ...
  • 组件的最大特性就是提高复用性,而插槽的作用是最大程度的优化组件的可复用能力。 组件复用常见场景如多个页面有同样的UI结构,通过组件间通讯机制传递数据,以此达到同一套代码渲染不同数据的效果。 然而,这种...
  • 路由参数变化,但是页面没有刷新这是Vue组件复用的默认处理方式 不想复用的话,就在父组件的<router-view>标签上加个key <router-view :key="$route.fullPath"></router-view>
  • 部分产品的实现中,我们可能遇到这样一个问题,就是组件复用,类似于一个elementui的notify,它不需要在你的页面上写他的组件名称,只需要使用它的全局的方法,如:this.$notify("")这样的方式调出弹窗,但是目前...
  • 小程序创建可复用组件的方法

    千次阅读 2019-07-03 11:21:46
    1.创建自定义组件 在my-component里面可以写自己的模板和样式,跟普通页面写法一致 2.在my-component.js定义属性,数据和方法 3.在父容器json中引入自定义组件 4.在父容器wxml中使用自定义组件 最终效果: ...
  • 就是创建的元素数量只需要满足遮罩的显示大小即可,比如遮罩内最多能显示6个元素的滚动组件,无论需要显示的数据量有多少,只需要创建6个元素即可(如下图)我们要处理的,就是在滚动的过程中不断地复用已有的元素。...
  • 作用:通过插槽slot可以更加方便的向子组件传递DOM元素,同时子组件使用插槽内容也十分简单,大大简化了代码,增加了代码可读性。 插槽slot 首先创建个基础组件,然后在页面调用显示,如下所示 父组件传递写法 父...
  • 思路:父组件只用传值给子组件,子组件复制逻辑初始化等… 直接上代码 先下载依赖包 npm install echarts --save 或者 cnpm install echarts --save main.js全局引入 import echarts from 'echarts' //引入echarts ...
  • 实际开发过程中,可能会存在头部或者其他组件复用的情况,于是可以新建一个common文件夹,用来存放一些公共的样式。 导入: 在相应的.css文件中,写完样式后,在应用该样式的文件内引入该公共样式文件。 @import url...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 161,112
精华内容 64,444
关键字:

复用组件