精华内容
下载资源
问答
  • Vue创建组件详解

    千次阅读 2021-01-30 15:41:16
    Vue创建组件详解

    全局注册组件

    Vue.component('my-component-name', {
      // ... 选项 ...
    })
    

    我们可以用这种方式来创建全局组件,在实例化Vue之前用Vue.component来创建组件,这样我们可以在任何实例化Vue的组件(new Vue)中使用。

    可能会报错:

    [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
    

    处理方法:在项目vue.config.js中,修改runtimeCompilertrue

    局部注册组件

    我们可以以普通对象的方式创建组件,对象中可以包含我们常用的datamethods等属性和方法,比如下面这样

    var ComponentA = { /* ... */ }
    

    注册局部组件的话。需要我们在要使用组件的地方(大多数情况下也是组件)使用components来注册

    单文件组件

    Demo.vue

    <template>
      <div>Demo</div>
    </template>
    

    首先导入组件,然后使用components注册组件,最后在template中使用组件

    <template>
       <demo></demo>
    </template>
    
    <script>
    import Demo from './Demo';
    export default {
      ......
      components: {
        Demo,
      }
    }
    </script>
    

    使用x-template引入模板

    <script type="text/x-template" id="xTemplate"> 
        <div>content</div> 
    </script>
    
    <script>
        Vue.component('xTemplateDemo', { 
            template: '#xTemplate', 
            ......
        });
    </script>
    

    jsx注册组件(后续补充)

    方法调用式创建(render函数注册组件)

    使用过像elementUIiview之类的第三方组件库的同学可能都知道,他们提供了很多全局的API可以很方便的创建组件,比如弹出框等,他们是怎么做的呢,我们下面就来看看。

    // components/Dialog/Dialog.vue
    <template>
      <transition name="fade">
        <div class="dialog-page" @click.self="close" v-if="isShow">
          <div class="dialog-box">
            <h3 class="title">{{ title }}</h3>
            <span class="close" @click="close">X</span>
            <el-button type="primary" class="confirm-btn" @click="confirm">确定</el-button>
          </div>
        </div>
      </transition>
    </template>
    
    <script>
    export default {
      name: "Dialog",
      props: {
        title: {
          type: String,
          default: '提示',
        }
      },
      data() {
        return {
          isShow: false
        }
      },
      mounted() {
        window.addEventListener('keyup', this.close)
        this.isShow = true;
      },
      methods: {
        close() {
          this.isShow = false;
          // 这里使用$nextTick是因为我们使用了过渡效果,关闭的时候先过渡,再销毁
          this.$nextTick(() => {
            this.$emit('close')
          })
        },
    
        confirm() {
          this.$emit('confirm')
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
    .dialog-page {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.6);
      z-index: 99999;
      .dialog-box {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translateX(-50%);
        margin: auto;
        width: 700px;
        height: 400px;
        padding-top: 20px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 0 6px 0 #fff;
        .title {
          text-align: center;
          font-size: 22px;
          color: #333;
        }
        .close {
          position: absolute;
          right: 20px;
          top: 20px;
          cursor: pointer;
        }
        .confirm-btn {
          width: 80%;
          position: absolute;
          left: 10%;
          bottom: 50px;
        }
      }
    }
    .fade-enter-active,
    .fade-leave-active {
      transition: opacity 0.2s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
      opacity: 0;
    }
    </style>
    
    

    新建文件

    // components/Dialog/index.js
    import Vue from 'vue';
    import Dialog from "@/components/Dialog/Dialog";
    
    let vm;
    function createVNode(resolve, reject, props) {
        return new Vue({
            mixins: [{
                mounted() {
                    document.body.appendChild(this.$el);
                },
                beforeDestroy() {
                    document.body.removeChild(this.$el);
                },
            }],
            beforeDestroy() {
                vm = null;
            },
    
            methods: {
                confirm() {
                    resolve('点击确认');
                    this.$destroy();
                },
                close() {
                    reject('点击关闭');
                    this.$destroy();
                }
            },
            render(createElement) {
                return createElement(Dialog, {
                    on: {
                        confirm: this.confirm,
                        close: this.close
                    },
                    props,
                    style: {
                        color: 'red'
                    },
                });
            }
        })
    }
    
    function show(props) {
        return new Promise((resolve, reject) => {
            // 如果有vm这个实例,先销毁
            if (vm) {
                vm.$destroy();
            }
            vm = createVNode(resolve, reject, props);
            vm.$mount();
        })
    }
    
    export default show;
    

    倒着看,我们导出了一个show方法,它返回的是一个Promise,这就是说我们在调用这个方法的时候可以用.then的语法在未来某一个时刻(关闭弹框,或者点击确认)执行一些操作。

    接着我们创建了一个vm实例,调用了$mount,是不是看着比较熟悉,没错,在main.js文件中

    // main.js
    ...
    new Vue({
        ...
        render: h => h(App),
    }).$mount('#app');
    

    它把new vue生成的虚拟DOM转换成真实DOM挂载到了#app上面,那上面我们的$mount没有传参数,会挂载到哪里呢?

    其实是需要我们手动挂载的。当前组件在渲染完成后,手动把当前组件的DOM插入到body中,在组件销毁前移除掉。

    接着说我们的组件,这里我们又看到一个createVNode方法,不用说,这个就是用来创建组件的方法了,可以看到它返回了一个Vue的实例化对象(虚拟DOM),new Vue的参数混入了一些生命周期函数,和两个methods方法,以及上段所说挂载dom与销毁dom。

    最重要的还是下面的render函数,这个内容很多,就不展开说了,想深入了解可以单击传送门,可以简单理解render可以生成VNode,就是虚拟节点。它的第一个参数是刚才我们编写的组件,第二个参数是一个对象,可以定义一些参数,比如要传给组件的参数、样式还有监听的事件等。

    这样我们new Vue的时候,没有用template的方式,而是用了render函数来生成我们要的组件,手动挂载到DOM中去(不在#app里面,是并列的关系,都在body下面)。

    接下来我们就可以在需要的地方调用了,比如App.vue

    // App.vue
    <template>
      <div id="app">
          <button @click="handleClick">Dialog</button>
      </div>
    </template>
    
    <script>
    import Dialog from '@/components/Dialog/index'
    export default {
      name: 'app',
      methods: {
        handleClick() {
          Dialog({
            title: '测试弹框'
          }).then(res => {
            console.log(res)
          }).catch(err => {
            console.log(err)
          })
        }
      }
    }
    </script>
    

    点击按钮的时候,我们调用导入的Dialog方法,传了title参数,现在我们可以看看效果。
    到现在我们已经完成了组件的创建和调用,而且我们点击关闭确认的时候可以看看控制台,是不是分别打印了
    在这里插入图片描述
    这就是我们在App.vue里面调用Dialog方法的时候分别在thencatch里面打印的,回到上面/components/Dialog/index.js文件中的show方法,我们返回的是promise,而且我们把resolvereject两个参数传入了createVNode方法中,分别在methods中的两个对应确认和关闭的方法中别调用,那么confirmclose是怎么被触发的呢

    可以看/components/Dialog/Dialog.vue文件中,我们在点击的时候,使用了$emit来触发对应的事件,那么事件是在哪里被接收的呢?回到/components/Dialog/index.js文件中的render函数,我们在createElement方法的第二个参数中有一个on对象,是不是感觉很熟悉,没错,就是用来监听事件的,我们上面用$emit触发的事件也是在这里监听的。这样我们就在点击确认或者关闭后,执行resolve或者reject方法,然后就可以在thencatch中执行相应的操作了。

    注册全局插件

    到上面为止,我们已经可以很方便的以API的形式来创建组件,但是可能有人会觉得还不够方便,每次还要先导入,再调用,有没有更方便的方式呢?肯定是有的,现在我们就来试试。

    其实也很简单,只需要把刚才的代码稍微改一下就可以了

    // /component/Dialog/index.js
    ...
    - export default show;
    + export default {
    +     install(vue) {
    +        vue.prototype.$Dialog = show;
    +     }
    + }
    
    // main.js
    + import Dialog from '@/components/Dialog/index'
    
    + Vue.use(Dialog);
    

    看到Vue.use又有了熟悉的感觉吧,我们平常使用插件不就是这么用的嘛!没错,第三方的插件能够以Vue.use的方式注册,是因为他们都在插件里面导出了一个install方法,不清楚的看这里哦 Vue.use

    这样我们就可以在需要的地方使用this.$Dialog调用了,也不需要先导入了,因为方法已经被挂到了Vue的原型上。

    现在就来试一下

    // App.vue
    <template>
      <div id="app">
          <button @click="handleClick">Dialog</button>
      </div>
    </template>
    
    <script>
    export default {
      name: 'app',
      methods: {
        handleClick() {
          this.$Dialog({
            title: '测试弹框'
          }).then(res => {
            console.log(res)
          }).catch(err => {
            console.log(err)
          })
        }
      }
    }
    </script>
    

    效果和刚才是一样的。ok,到这里是不是觉得和ElementUI提供的一些方法有点相似呢,没错,其实他们也是这么做的。

    展开全文
  • Vue 创建组件的两种方法

    万次阅读 2017-07-07 10:30:47
    创建组件方法var child=Vue.extend({})var parent=Vue.extend({})Vue.extend() 全局方法 生成构造器,创建子类使用基础 Vue 构造器,创建一个“子类”。这样写非常繁琐。于是vue进行了简化使用Vue.component()直接...

    创建组件的两种方法

    1.全局注册
    2.局部注册

    var child=Vue.extend({})
    
    var parent=Vue.extend({})

    Vue.extend() 全局方法 生成构造器,创建子类

    使用基础 Vue 构造器,创建一个“子类”。

    这样写非常繁琐。于是vue进行了简化

    使用Vue.component()直接创建和注册组件:

    Vue.component(id,options) 全局方法 用来注册全局组件

    id 是string类型,即是注册组件的名称
    options 是个对象

    // 全局注册,my-component1是标签名称
    Vue.component('my-component1',{
        template: '<div>This is the first component!</div>'
    })
    
    var vm1 = new Vue({
        el: '#app1'
    })

    Vue.component()的第1个参数是标签名称,第2个参数是一个选项对象,使用选项对象的template属性定义组件模板。
    使用这种方式,Vue在背后会自动地调用Vue.extend()。

    在选项对象的components属性中实现局部注册:

    var vm2 = new Vue({
        el: '#app2',
        components: {
            // 局部注册,my-component2是标签名称
            'my-component2': {
                template: '<div>This is the second component!</div>'
            },
            // 局部注册,my-component3是标签名称
            'my-component3': {
                template: '<div>This is the third component!</div>'
            }
        }
    })

    ==局部注册都放在选项对象中创建==

    注意:这里是components,里面可以定义多个组件。

    简化后是这样的写法

    <body>
        <div id='box'>      
            <parent>        
            </parent>
        </div>
    
        <script src='js/vue.js'></script>
        <script>
    
            Vue.component('parent',{
                template:`<div><h1>我是父组件</h1><child></child></div>`,
                    components:{
                    'child':{
                        template:`<h1>我是子组件</h1>`
                    }
                }
            })
    
    
            new Vue({
                el:'#box'
            })
    
        </script>
    </body>

    注册一个parent的父组件。然后在父组件的选项对象中注册一个child的子组件。将子组件child的标签写到父组件parent的template里面。

    页面上的样式结构就是

    <div>
        <h1>我是父组件</h1>
        <h1>我是子组件</h1>
    </div>

    注意:用局部注册的子组件不能单独直接使用!

    标签挂在div里,会报错

    <div id='box'>      
        <child></child>
    </div>
    
    结果会报错
    展开全文
  • Vue创建组件的三种方式

    千次阅读 2018-09-03 16:03:54
    方式一:使用Vue.extend来创建全局的Vue组件 1.1 使用Vue.extend来创建组件模板对象 var com1 = Vue.extend({ template:'&lt;h3&gt;这是使用Vue.extend创建的组件&lt;/h3&gt;' //通过template...

    方式一:使用Vue.extend来创建全局的Vue组件

    1.1 使用Vue.extend来创建组件模板对象

    var com1 = Vue.extend({
        template:'<h3>这是使用Vue.extend创建的组件</h3>'
        //通过template属性,制定了组件要展示的html结构
      })

    1.2 使用 Vue.component完成组件的创建

    Vue.component('组件的名称',创建出来的组件模板对象) 

    注意:使用Vue.component 定义全局组件的时候,如果组件名称使用了驼峰命名,则在引用组件的时候,需要把大写的驼峰改为小写的字母,同时,两个单词之间,使用 - 连接;如果不使用驼峰,则直接拿名称来使用即可。

    Vue.component('myCom1',com1)

    1.3 使用组件

    如果要使用组件,直接把组件的名称,以html标签的形式引入即可

     <my-com1></my-com1>

    注:第一步和第二步可以合为一步

    Vue.component('mycom1', Vue.extend({
        template:'<h3>这是使用Vue.extend创建的组件</h3>'
    }))

    完整的代码:

    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      </head>
    <body>
      <div id='app'>
        <!-- 如果要使用组件,直接把组件的名称,以html标签的形式引入即可 -->
        <my-com1></my-com1>
      </div>
    </body>
    <script src="../lib/vue.js"></script>
    <script>
      // 1.1使用Vue.extend来创建全局的Vue组件
      var com1 = Vue.extend({
        template:'<h3>这是使用Vue.extend创建的组件</h3>'
        //通过template属性,制定了组件要展示的html结构
      })
      //1.2 使用 Vue.component('组件的名称',创建出来的组件模板对象)
      //如果使用Vue.component 定义全局组件的时候,组件名称使用了驼峰命名,
      //则在引用组件的时候,需要吧把大写的驼峰改为小写的字母,同时,两个单词之间,
      //使用 - 连接
      //如果不使用驼峰,则直接拿名称来使用即可;
      Vue.component('myCom1',com1)
      
      // 第一个参数,组件的名称,将来在引用组件的时候,就是一个标签的形式来引入它的
      //第二个参数: Vue.extend 创建的组件,template就是组件将来要展示的html内容
      Vue.component('mycom1', Vue.extend({
        template:'<h3>这是使用Vue.extend创建的组件</h3>'
      }))
      var vm = new Vue({
        el:'#app',
      })
      
    </script>
    </html>
    

    方式二:使用Vue.component创建组件

    创建组件

    注意:template属性指向的模板内容,必须只能有唯一的一个根元素。

    Vue.component('mycom2',{
        template:'<div><h3>这是使用Vue.component创建的组件</h3><span>123</span></div>'
    })

    使用组件的方法和方式一中的相同,直接把组件的名称,以html标签的形式引入即可。

    完整代码:

    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      </head>
    <body>
      <div id='app'>
        <!-- 如果要使用组件,直接把组件的名称,以html标签的形式引入即可 -->
        <mycom2></mycom2>
      </div>
    </body>
    <script src="../lib/vue.js"></script>
    <script>
      // template属性指向的模板内容,必须只能有唯一的一个根元素
      Vue.component('mycom2',{
        template:'<div><h3>这是使用Vue.component创建的组件</h3><span>123</span></div>'
      })
      var vm = new Vue({
        el:'#app',
      })
    </script>
    </html>
    

     方式三:使用 template元素,定义组件的html模板结构

    当组件的模板中元素较多时,可以在被Vue控制的 div 外面,使用 template元素,定义组件的html模板结构。

    3.1 创建组件

    这里的 #tmp1就是模板的id

    Vue.component('mycom3',{
        template:'#tmp1'
    })

    3.2 编写模板

    使用 template 标签,创建模板,模板要放在被 Vue 对象控制的 div元素的外面,这里模板的 id 和创建组件时的对应。

    <template id="tmp1">
        <div>
          <h1>这是通过template元素,在外部定义的组件结构,这个方式,有代码的智能提示和高亮</h1>
          <h4>好用,不错</h4>
        </div>
    </template>

    使用组件时,直接把组件的名称,以html标签的形式引入即可。

    完整代码:

    <html>
      <head>
    	 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      </head>
    <body>
      <div id='app'>
        <!-- 如果要使用组件,直接把组件的名称,以html标签的形式引入即可 -->
        <mycom3></mycom3>
      </div>
      <!-- 在被控制的 #app 外面,使用 template元素,定义组件的html模板结构 -->
      <template id="tmp1">
        <div>
          <h1>这是通过template元素,在外部定义的组件结构,这个方式,有代码的智能提示和高亮</h1>
          <h4>好用,不错</h4>
        </div>
      </template>
    </body>
    <script src="../lib/vue.js"></script>
    <script>
      // template属性指向的模板内容,必须只能有唯一的一个根元素
      Vue.component('mycom3',{
        template:'#tmp1'
      })
      var vm = new Vue({
        el:'#app',
      })
    </script>
    </html>
    

     

    展开全文
  • VUE 创建组件并且引用

    万次阅读 2019-08-05 17:53:27
    QQ技术交流群173683866 526474645 欢迎加入交流讨论,打广告的一律...如图,在common 中创建了ChoosingCity.vue 组件 2.在router 文件夹下的index.js 配置该组件 import ChoosingCity from '@/components/common...

    QQ技术交流群 173683866 526474645 欢迎加入交流讨论,打广告的一律飞机票

    本文以 ChoosingCity.vue 组件为示例

    1.创建组件

    如图,在common 中创建了ChoosingCity.vue 组件

    2.在router 文件夹下的index.js 配置该组件

    
    import ChoosingCity from '@/components/common/ChoosingCity'
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'Home',
          component: Home
        },
        {
          path: '/ChoosingCity',
          name: 'ChoosingCity',
          component: ChoosingCity
        }
      ]
    })

     

     

    3. 引用组件,在Home.vue 中的 script 导入组件,并且在components中声明

    <script>
    import ChoosingCity from './common/ChoosingCity';
    export default {
      data() {
        return {
        };
      },
      components:{
        'ChoosingCity': ChoosingCity
      },
    }

    在Home.vue 中的 template 里面的div 里面添加自定义的公共 ChoosingCity 组件

    <ChoosingCity />

     

    展开全文
  • Vue 创建组件的方式

    千次阅读 2018-08-07 11:10:56
    1.1使用Vue.extend来创建全局的Vue组件 var tem1 = Vue.extend({ template:'&amp;amp;amp;lt;h3&amp;amp;amp;gt;这是使用 Vue.extend 创建的组件&amp;amp;amp;lt;/h3&amp;amp;amp;gt;' //指定...
  • vue开发项目中想自定义一个自己的组件,于是在网上找一下教程,教程基本的都一样,但是都不是很详细,我就按照网上的教程从头到尾学习了一遍,文章中如果有不正确的,还请各位大佬指出,共同进步。 vue自定义组件...
  • Vue.js 创建Vue组件的方式

    千次阅读 2019-02-24 17:10:12
    文章目录定义Vue组件全局组件定义的三种方式定义实例内部私有组件 定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能...
  • Vue组件--创建组件之利用template元素

    千次阅读 2018-10-31 21:32:50
    代码: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&...js/vue.js" &g
  • 今日,怂怂就为带来一篇前端vue干货,如何在vue创建自定义组件,并且在项目中引入自定义的组件;具有很好的参考价值,一起跟怂怂过来吧,如若对您有所帮助,别忘了在文章右上角点个赞哦。 1,在你的项目中专门...
  • 组件的出现 拆分了Vue实例的代码量 能够以不同的组件来划分不同的功能模块 需要什么样的功能 调用对应的组件即可 组件化和模块化的区别: 模块化: 从代码逻辑的角度进行划分的 方便了代码的分层开发 保证了每个...
  • 打开Visual Studio Code;文件-->...输入框输入vue.json;将如下代码复制到文件中:{ "Print to console": { "prefix": "vue", "body": [ "<!-- $0 -->", "<template>", " &...
  • vue动态创建组件的方法解析

    千次阅读 2020-08-11 10:02:47
    // 我的理解,你给我一个组件,我将组件生成的dom 节点挂载到 body 上 // 就是这么简单的一个函数 function create(Component, props) { // 借助 Vue 来create real dom ,然后添加到body 中 let instance = new ...
  • Vue嵌套组件创建和销毁的顺序

    万次阅读 2018-11-10 16:10:05
    今天我当然不是来讲生命周期的,我要将的是嵌套组件创建顺序,嵌套组件件钩子函数的执行顺序,最后是销毁顺序。闲话少说,直接上代码。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt...
  • 具体错误如下:   ...94% asset optimization ... ERROR Failed to compile with 1 errors 14:27:08 ...我这里的错误是因为我在创建单文件组件的中加入了一个错误的规范: 正确的是
  • vue.js中组件创建和使用方法

    万次阅读 2017-05-26 09:33:14
    vue.js中创建组件有三个步骤:创建组件构造器,注册组件以及使用组件。下边以实际例子说明组件的定义及使用方法。同时提供了使用语法糖的简单写法的例子
  • Vue组件传参的五种方式

    万次阅读 多人点赞 2020-03-15 21:24:23
    Vue组件传参的五种方式 方法一 props传参 父组件 <template> <div class="wrap"> <div>我是Father组件</div> <Son str="我是字符串" :num=5 :obj="{cont:'我是一个对...
  • vue3动态创建组件

    千次阅读 2020-12-23 15:11:09
    <template> <div class="b"> <cmp :...</cmp>...import Vue from 'vue/dist/vue.common.js'//注意引用方式 export default { components: { cmp: { .
  • vue-使用js创建组件--render函数

    千次阅读 多人点赞 2020-07-10 16:56:01
    vue-cli--使用js创建组件--render函数template 怎么被写成一个页面的一般使用组件我们也可以使用JS创建一个组件 template 怎么被写成一个页面的 template 被 vue-template-compiler 插件编译成一个render函数 ...
  • Vue动态创建组件并插入到页面中

    千次阅读 2021-02-01 22:14:13
    最近在板砖途中遇到一个需要动态创建Vue组件并插入到页面上的需求,之前没有遇到过这类需求,经过一番百度搞定这个问题,在这里写下总结,作为回顾。 心得 动态创建组件依靠Vue.extend 案例引入 现在有下面这样一个...
  • vue组件中插入图片

    千次阅读 2020-03-22 13:13:17
    最近在Vue学习交流群里面发现很多小伙伴在想要在vue中显示图片,但是把图片写在data里面作为变量传到模板中的时候却发现图片出不了,以为是图片路径的问题,查了半天还是出不来。 解决方法 方案1: 使用require将...
  • vue常用创建组件几种方式总结

    千次阅读 2018-09-30 12:35:59
    引入vue.js就代表着不能用import、require之类的引入单文件组件文件,只能在文件中开发,或者多个js文件分先后顺序植入开发,然后就出现了一个尴尬的问题就是,忘记了最原本的其他组件创建的方式,所以记录回顾下: ...
  • Vue动态创建组件方法

    千次阅读 2018-10-29 16:47:00
    组件写好之后有的时候需要动态创建组件。...富文本编辑器也就是第三方的组件,需要绑定一个值就跟input一样,但是其他的和平常都是一样的,根据这个特点我们就可以使用Vue的for循环去动态创建例如 <div> ...
  • vue中动态添加组件

    千次阅读 2018-12-02 20:10:46
    import leave from './components/leave.vue' export default {  name: 'createComponent',  data() {  return {  lst: [{  "id": "1"  }],  num: 1  }  },  components: {  leave  },  ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 392,024
精华内容 156,809
关键字:

vue怎么创建组件

vue 订阅