精华内容
下载资源
问答
  • vue 封装组件

    2021-02-03 14:19:48
    1、创建组件文件夹包含 .vue文件和对应的.js文件 如图: 2、完成组件模板 <!-- 这是一个公共组件 --> <template> <div>这是一个公共组件内容</div> </template> <script> ...

    一、通过install 封装
    1、创建组件文件夹包含 .vue文件和对应的.js文件
    如图:
    在这里插入图片描述
    2、完成组件模板

    <!-- 这是一个公共组件 -->
    <template>
      <div>这是一个公共组件内容</div>
    </template>
    
    <script>
    export default {
      name:"List",
      data () {
        return {
        };
      },
    
      methods: {}
    }
    
    </script>
    <style lang='scss' scoped>
    </style>
    

    3、在相应的js内注册组件
    /-----list.js文件-----/

    import myList from "./List.vue" 
    const List = {
      install :function (Vue) {
        Vue.component("list",myList)  //list为使用组件的名字
      }
    }
    export default List
    

    导入模板List.vue ,通过install方式注册组件,组件需先注册在使用。使用install方法 即可通过在main.js 中 vue.use()使用。
    4、在项目中引用
    /-----main.js--------/
    import List from “./components/list/list.js”
    Vue.use(List)

    5、使用组件

    <template>
      <div id="body">
        <list></list>
      </div>
    </template>
    

    二、直接全局封装
    1、直接新建.vue 模板

    <!-- 这是一个公共组件 -->
    <template>
      <div>这是一个公共组件内容</div>
    </template>
    
    <script>
    export default {
      name:"List",
      data () {
        return {
        };
      },
    
      methods: {}
    }
    
    </script>
    <style lang='scss' scoped>
    </style>
    

    2、在main.js 引入

    //公共组件
    import List from "./components/list/List.vue"
    Vue.component("List",List)
    

    3、使用

    <template>
      <div id="body">
        <list></list>
      </div>
    </template>
    
    展开全文
  • Vue封装组件

    2019-08-14 14:15:35
    参考地址:https://segmentfault.com/a/1190000015373435?utm_source=tag-newest https://www.cnblogs.com/dudu123/p/10509787.html https://www.cnblogs.com/pengfei-nie/p/9134367.html
    展开全文
  • vue封装组件发布npm

    2021-04-28 11:19:31
    感谢 前端欧阳锋 大佬的技术分享,以下则是我根据视频总结的 vue封装组件发布npm 的笔记。 vue封装组件发布npmVue项目中需要的操作:1、vue.config 内 新增 scripts2、在指定的打包目录下创建js暴露install方法cmd...

    学习渠道:https://www.bilibili.com/video/BV1zy4y1q7bW?p=1

    感谢 前端欧阳锋 大佬的技术分享,以下则是我根据视频总结的 vue封装组件发布npm 的笔记。

    Vue项目中需要的操作:

    1、vue.config 内 新增 scripts

    	"ui-build": "vue-cli-service build --target lib ./src/lib/index.js --dest qk-ui --name qk-ui"
    
    
    ​		--target lib 	指定打包目录
    ​		--name 			打包后的文件名称
    ​		--dest 			打包后的文件夹的名称
    

    2、在指定的打包目录下创建js暴露install方法

    import qkDragUl from "@/components/qk-drag-ul";const install = (Vue) => {
    
    ​		 		Vue.component(qkDragUl.name, qkDragUl);};export default install;
    

    cmd操作如下

    1、nrm切换为npm源

    2、登陆npm 命令:npm login

    • 在cmd里输入密码时光标时不会动的,正常输入回车就好

    3、如果发布新组件 npm publish

    4、如果修改版本需要先键入以下命令后,执行 3

    • 如果说要改为1.0.1,最后一位增加了1,命令:npm version patch
    • 如果说要改为1.1.1,中间一位增加了1,命令:npm version minor
    • 如果说要改为2.1.1,第一位增加了1,命令:npm version major

    让我们一起有条不紊的持续进步,喜欢的话不妨点个小小的赞与关注。

    展开全文
  • Vue封装组件的过程

    万次阅读 多人点赞 2018-03-20 09:41:05
    组件可以扩展HTML元素,封装可重用代码 ● 在较高层面上,组件是自定义元素,Vue.js的编译器为他添加特殊功能 ● 有些情况下,组件也可以表现用 is 特性进行了扩展的原生的HTML元素 ● 所有的Vue组件同时也都...

    vue组件的定义

    组件(Component)是Vue.js最强大的功能之一

    ● 组件可以扩展HTML元素,封装可重用代码

    ● 在较高层面上,组件是自定义元素,Vue.js的编译器为他添加特殊功能

    有些情况下,组件也可以表现用 is 特性进行了扩展的原生的HTML元素

    所有的Vue组件同时也都是Vue实例,所以可以接受相同的选项对象(除了一些根级特有的选项),并提供相同的生命周期钩子

    vue组件的功能

    1)能够把页面抽象成多个相对独立的模块

    2)实现代码重用,提高开发效率和代码质量,使得代码易于维护

     

    Vue组件封装过程

    ● 首先,使用Vue.extend()创建一个组件

    ● 然后,使用Vue.component()方法注册组件

    ● 接着,如果子组件需要数据,可以在props中接受定义

    ● 最后,子组件修改好数据之后,想把数据传递给父组件,可以使用emit()方法

    组件使用流程详细介绍

    1、组件创建---有3中方法,extend()      <template id=''>      <script type='text/x-template'  id=''>

    A、调用Vue.extend(),创建名为myCom的组件,template定义模板的标签,模板的内容需写在该标签下

    var myCom = Vue.extend({
        template: '<div>这是我的组件</div>'
    })

    B、<template id='myCom'>标签创建,需要加上id属性

    <template id="myCom">
        <div>这是template标签构建的组件</div>
    </template>

    C、<script type='text/x-template' id='myCom'>,需加id属性,同时还得加type="text/x-template",加这个是为了告诉浏览器不执行编译里面的代码

    <script type="text/x-template" id="myCom1">
        <div>这是script标签构建的组件</div>
    </script>

    2、注册组件----有2中方法,全局注册,局部注册

    A1、全局注册:一次注册( 调用Vue.component( 组件名称,为组件创建时定义的变量 ) ),可在多个Vue实例中使用。

    我们先用全局注册,注册上面例子中创建的myCom组件

    Vue.component('my-com',myCom)

    A2、全局注册语法糖:不需要创建直接注册的写法

    Vue.component('my-com',{
        'template':'<div>这是我的组件</div>'
    })

    'my-com'为给组件自定义的名字,在使用时会用到,后面myCom对应的就是上面构建的组件变量。

    A3、如果是用template及script标签构建的组件,第二个参数就改为它们标签上的id值

    Vue.component('my-com',{
        template: '#myCom'
    })

    B1、局部注册:只能在注册该组件的实例中使用,一处注册,一处使用

    var app = new Vue({
        el: '#app',
        components: {
            'my-com': myCom
        }
    })

    B2、局部注册语法糖:

    var app = new Vue({
        el: '#app',
        components: {
            'my-com': {
               template: '<div>这是我的组件</div>'
            }
        }
    })

    B3、<template>及<script>创建的组件,局部注册

    var app = new Vue({
        el: '#app',
        components: {
            'my-com': {
               template: '#myCom'
            }
        }
    })

    3、调用组件

    只需要在调用组件的地方,写上组件名字的标签即可

    <div>
        /*调用组件*/
        <my-com></my-com>
    </div>

    4、栗子

     

    A、全局注册:新建一个html文件,引入vue.js,并且定义2个vue实例app1和app2

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue组件</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app1">
            <my-com></my-com>
        </div>
        <div id="app2">
            <my-com></my-com>
        </div>
    
        <script>
            /*创建组件*/
            var myCom = Vue.extend({
                template: '<div>这是我的组件</div>'
            });
            /*全局注册组件*/
            Vue.component('my-com',myCom);
    
            /*定义vue实例app1*/
            var app1 = new Vue({
                el: '#app1'
            });
    
            /*定义vue实例app2*/
            var app2 = new Vue({
                el: '#app2'
            });
        </script>
    </body>
    </html>

    显示效果:

     

    可以看到,全局注册的组件在实例app1和实例app2中都可以被调用。

    B、局部注册:将创建的组件注册到实例app1下

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue组件</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app1">
            <my-com></my-com>
        </div>
        <div id="app2">
            <my-com></my-com>
        </div>
    
        <script>
            var myCom = Vue.extend({
                template: '<div>这是我的组件</div>'
            });
    
            // Vue.component('my-com',myCom);
            /*局部注册组件*/
            var app1 = new Vue({
                el: '#app1',
                components:{
                    'my-com':myCom
                }
            });
    
            var app2 = new Vue({
                el: '#app2'
            });
        </script>
    </body>
    </html>

     

     

    可以看到只渲染了app1实例下的组件,app2实例虽然调用了该组件,但是因为这个组件没有在其内部注册,也没有全局注册,所以报错说找不到该组件。

    C、template 和script标签创建组件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue组件</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app1">
            <my-com></my-com>
            <my-com1></my-com1>
        </div>
    
        <template id="myCom">
            <div>这是template标签构建的组件</div>
        </template>
    
        <script type="text/x-template" id="myCom1">
            <div>这是script标签构建的组件</div>
        </script>
    
        <script>
            Vue.component('my-com1',{ //全局注册
                template: '#myCom1'
            });
    
            var app1 = new Vue({
                el: '#app1',
                components:{
                    'my-com':{
                        template: '#myCom'  //局部注册
                    }
                }
            });
        </script>
    </body>
    </html>

    显示效果:

    5、异步组件

    vue作为一个轻量级前端框架,其核心就是组件化开发。我们一般常用的是用脚手架vue-cli来进行开发和管理,一个个组件即为一个个vue页面,这种叫单文件组件。我们在引用组件之时只需将组件页面引入,再注册即可使用。

    当项目比较大型,结构比较复杂时,我们一般选用vue-cli脚手架去构建项目。因为vue-cli集成了webpack环境,使用单文件组件,开发更简单,易上手,尤其是在对组件的处理上。对于原生vue.js,我们就得将组件构建在同一个html的script标签下或者html的外部js中,所有组件集中在一块,不容易管理,这也是原生vue,js的一点不便之处

    vue.js可以将异步组件定义为一个工厂函数。

    使用$.get获取本地文件会跨域,所以要将项目部署到服务器中

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue组件</title>
        <script src="vue.js"></script>
        <script type="text/javascript" src='jquery-3.1.1.min.js'></script>
    </head>
    <body>
        <div id="app1">
            <head-com></head-com>
        </div>
        <script>
            Vue.component('head-com', function (resolve, reject) {
                $.get("a.html").then(function (res) {
                    resolve({
                        template: res
                    })
                });
            });
    
            var app1 = new Vue({
                el: '#app1'
            });
    
        </script>
    </body>
    </html>

    显示效果如下:

    6、Vue中的props数据流

    通过在注册组件中申明需要使用的props,然后通过props中与模板中传入的对应的属性名,去取用这些值

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue组件</title>
        <script src="vue.js"></script>
        <script type="text/javascript" src='jquery-3.1.1.min.js'></script>
    </head>
    <body>
        <div id='app'>
           <my-component name="jiangjiang" come-from="guilin"></my-component>
           <!-- 然后在模板中通过属性传值的方式进行数据的注入 -->
        </div>
        <script>
            Vue.component('my-component', {
              props: ['name', 'comeFrom'],    //在注册组件的时候通过props选项声明了要取用的多个prop
              // 在注册组件的模板中使用到props选项中声明的值
              template: '<p>我叫:{{name}}, 我来自:{{comeFrom}}</p>',
              created: function () {
                console.log('在created钩子函数中被调用')
                console.log('我叫:', this.name)
                console.log('我来自:', this.comeFrom)
              }
            })
    
    
            new Vue({
              el: '#app'
            })
    
    
        </script>
    </body>
    </html>
    
     

     

    注意

    A、props取值的方式

    在注册组件的模板内部template,直接通过prop的名称取值就Ok

    template: '<p>我叫:{{name}}, 我来自:{{comeFrom}}</p>'

    不在注册组件的模板内部template,用this.prop的方式

     console.log('我来自:', this.comeFrom)

    B、在template选项属性中,可以写驼峰命名法,也可以写短横线命名法

          在HTML(模板)中,只能写短横线命名法

    原因:vue组件的模板可以放在两个地方

    a、Vue组件的template选项属性中,作为模板字符串

    b、放在.html中[  用script  template标签创建的组件 ],作为HTML

    问题在于HTML不区分大小写,所以在vue注册组件中通用的驼峰命名法,不适用于HTML中的Vue模板,在HTML中写入props属性,必须写短横线命名法(把原来props属性中的每个prop大写换成小写,并且在前面加“-”)

    6中的

        <div id='app'>
           <my-component name="jiangjiang" come-from="guilin"></my-component>
           <!-- 然后在模板中通过属性传值的方式进行数据的注入 -->
        </div>

    改成

        <div id='app'>
           <my-component name="jiangjiang" comeFrom="guilin"></my-component>
           <!-- 然后在模板中通过属性传值的方式进行数据的注入 -->
        </div>

    显示效果,第二个没有显示

     

    异步组件的实现原理;异步组件的3种实现方式---工厂函数、Promise、高级函数

    异步组件实现的本质2次渲染,先渲染成注释节点,当组件加载成功后,在通过forceRender重新渲染

    高级异步组件可以通过简单的配置实现loading   resolve   reject   timeout  4种状态

     

     

     

     

     

     

     

     

    展开全文
  • vue封装组件的事件监听,点击封装好的组件事件
  • 这里写自定义目录标题Vue封装组件实现响应式布局1. 封装 Layout.vue组件2. Layout.vue组件使用 Vue封装组件实现响应式布局 主要思路:使用flex布局,左边主体内容区域根据页面宽度自适应,右边侧边栏固定宽度。使用...
  • 主要介绍了echarts.js 动态生成多个图表 使用vue封装组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue封装组件 // options 内部同组件内部生命周期一样,但组件内部优先执行 import Vue from 'vue'; import QuillEditorUploadImage from "./Quill-Editor-Upload-Image.vue"; export default { open(quill) { // ...
  • vue封装组件之 tabbar

    2020-09-07 21:02:32
    vue 封装 tabbar 组件
  • vue封装组件总结

    2019-12-13 21:21:38
    组件引用子组件,设置props <add tableName="mysql"/> vue组件 初始化 created () { // 在组件初始化的时候执行,只执行一次 console.log( this.$data );...vue中子组件的method...
  • vue封装组件的过程

    千次阅读 2019-07-26 15:24:22
    组件可以扩展HTML元素,封装可重用代码 ● 在较高层面上,组件是自定义元素,Vue.js的编译器为他添加特殊功能 ● 有些情况下,组件也可以表现用 is 特性进行了扩展的原生的HTML元素 ● 所有的Vue组件同时也都是...
  • vue 封装组件

    2020-07-30 18:20:54
    1、创建组件my-project\src\components\CubeNavItem.vue <template> <div class="item" > <div class="iconfont-box"> <slot></slot> </div> <div class="title...
  • 如何使用Vue封装组件

    2020-05-30 21:33:20
    首先了解一下封装组件的步骤: 1.props:父传子 2.事件(派发和监听) this.$emit()派发事件 通过@或$on来监听事件 3.slot(插槽),内容分发 命名插槽 <slot name="命名插槽名"></slot> 例如:<slot...
  • Vue封装组件并发布npm

    2021-03-16 00:39:48
    这样也就给Vue全局注入了你的所有的组件。 你为什么要二次封装el组件? 提供开发效率 提供组件的复用性(组件逻辑较为复杂的时候,封装可以让下次复用更简单) 第 1 章:组件封装 使用方法如下: 在项目 / main....
  • vue封装组件

    2020-04-30 22:29:07
    vue create ck-ui Manually select features babel css linter router vuex sass/scss (with dart-sass) 官方目前主力推 dart-sass 最新的特性都会在这个上面先实现 ESLint + Standard config 不准空格 分号 逗号 ...
  • vue 封装组件 (例子table组件)

    千次阅读 2020-04-28 11:14:40
    封装组件的步骤  建立组件的模板,先把架子搭起来,写写样式,考虑好组件的基本逻辑。   准备好组件的数据输入。即分析好逻辑,定好 props 里面的数据、类型。(后面详解)  准备好组件的数据输出。即根据组件...
  • 上拉加载vue封装代码如下: <script> export default { name: 'DownList', data () { return { isHeight: 0 } }, mounted () { window.addEventListener('scroll', this.onScroll) }, methods: { ...
  • 最近学习了下vue项目如何封装组件并发布到npm 上面,下面就来简单的说一下吧 首先我们先创建一个vue项目,创建完成后在根目录下新建一个package文件夹 然后在package文件夹下建立一个index.js和fieldset文件夹,这...
  • vue 封装组件--可复用

    2021-04-21 16:26:49
    应项目需求,为避免代码重复,耦合性高,使用 vue + vant UI ...封装组件 html – headTips/index.vue <template> <div class="headTips"> <van-nav-bar :title="text" :left-arrow="shows"> <.
  • vue封装组件以及调用

    2020-10-14 14:30:54
    1. index.js export { default as addDialog } from './addDialog' ...editDialog.vue <template> <div><el-dialog title="编辑" :visible.sync="dialogVisible" width="40%
  • vue被广大前端推崇很重要一点就是组件封装,但是在组件封装的时候,组件可能在各处都要用到,但是在各处的样式可能不太一样,例如:按钮组件,这时怎么办,难道不同样式但是结构相同的组件进行多次封装么?...
  • comDataPicker.vue <template> <div> <el-date-picker :clearable="false" v-model="dataPicker" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" @change="dataChange"&...
  • vue封装组件(简单入门)

    千次阅读 2019-03-04 15:34:49
    然后因为这两天在搞tinymce富文本技术预言,所以也是跟着网上的案例半懂不懂的弄出来了,但是对其中封装组件调用确实很不明白,所以也是在文档和网上似是非是的介绍中搞了一下,所以也是写下来作为学习vue的一个小...
  • 最近项目不是很忙,去研究了下封装Vue组件并发布到npm的流程,简单的记录下, 源码传送门。在动手开发之前去看了下element的源码,有很多值得学习的地方,如果对封装vue组件感兴趣的推荐一定要去看一看。 一、首先...
  • 封装vue组件库的两种方法和形式: 一:是建立一个webpack-simple 项目 二:是在通过vue-cli脚手架建立webpack vue项目,这种项目有点冗余,可是我们对这种项目最熟悉 下面分别介绍两种用法: 一: 1.首先先建立...
  • 组件化是Vue中的重要思想,当我们对vue的基本知识有了一定的基础就要开始封装组件了 它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用。组件树。 组件化思想的应用 1.在项目中充分...
  • 最近读了下element的源码,仿照他封装了两种不同的组件。 第一种:通过组件来调用显示的 <template> <!--src/component/custom/main.vue--> <div class = "contine"> <p class = ...
  • 组件使用 value 实现了一个功能,但又需要实现双向绑定,这时就会有冲突。 通过 定义组件时的 model 选项,从而实现了自定义组件 v-...import Vue from 'vue' const component = { model: { prop: 'value1', ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,350
精华内容 3,740
关键字:

vue封装组件

vue 订阅