Vue组件封装

组件是什么？

组件是Vue中的一个重要概念，是一个可以重复使用的Vue是可以复用的Vue实例，它拥有独一无二的组件名称，它可以扩展HTML元素，以组件名称的方式作为自定义的HTML标签。组件是可复用的Vue实例， 把一些公共的模块抽取出来，然后写成单独的的工具组件或者页面，在需要的页面中就直接引入即可。组件就是为了拆分Vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块，当我们需要什么样的功能，就可以去调用对应的组件。

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、及

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

3、调用组件

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

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

最后

以上就是迷人项链为你收集整理的Vue组件封装的全部内容，希望文章能够帮你解决Vue组件封装所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。