【vue 组件化开发一】组件基本使用、全局和局部组件、父组件和子组件的区别前言：一、组件的基本使用二、全局组件和局部组件三、父组件和子组件的区别

84 阅读 0 评论 56 点赞

我是靠谱客的博主积极太阳，这篇文章主要介绍【vue 组件化开发一】组件基本使用、全局和局部组件、父组件和子组件的区别前言：一、组件的基本使用二、全局组件和局部组件三、父组件和子组件的区别，现在分享给大家，希望可以做个参考。

前言：

完整内容请关注：

一、组件的基本使用

二、全局组件和局部组件

全局注册，通过 Vue.component

局部注册，通过 components:{}

全局组件

局部组件

三、父组件和子组件的区别

前言：

完整内容请关注：

(1条消息) Vue 的基础学习_小余努力搬砖的博客-CSDN博客https://blog.csdn.net/yzq0820/category_11934130.html?spm=1001.2014.3001.5482

一、组件的基本使用

简单的组件化使用例子

组件是可复用的 Vue 实例，且带有一个名字：

在这个例子中是button-counter 。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：<button-counter></button-counter>

template中是组件的DOM元素内容。

<button-counter></button-counter>使用组件

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div id="app"> 
        <button-counter></button-counter>
    </div>
    <script src="./vue.js"></script>
    <script>
        Vue.component('button-counter',{
            data:function(){ //必须是函数
                return{
                    count:0
                }
            },
            template:'<button @click="handle">点击了{{count}}</button>',//只能有一个根元素
            methods:{
                handle:function(){
                    this.count++
                }
            }
        })

        const vm = new Vue({
            el:"#app",
            data(){
                return{

                }
            }
        })
    </script>

二、全局组件和局部组件

全局注册，通过 `Vue.component`

局部注册，通过 `components:{}`

全局组件

全局组件，可以在多个vue实例中使用，类似于全局变量。

使用Vue.component('HelloWorld', {data(){}})方式注册，直接使用<button-counter></button-counter>调用。HelloWorld是全局组件的名字，{data(){}}是定义的组件对象。

<hello-world></hello-world>

第二个全局组件通过<HelloWorld></HelloWorld>

实现了在渲染

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
    <div id="app"> 
        <button-counter></button-counter>
        <hello-world></hello-world>
    </div>
    <script src="./vue.js"></script>
    <script>
        Vue.component('HelloWorld',{
            data(){
                return{
                    msg:"HelloWorld"
                }
            },
            template:`<div>{{msg}}</div>`
        })
        Vue.component('button-counter',{
            data:function(){ //必须是函数
                return{
                    count:0
                }
            },
            template:`
            <div>
                <button @click="handle">点击了{{count}}</button>
                <HelloWorld></HelloWorld>
            </div>`,
            //只能有一个根元素
            methods:{
                handle:function(){
                    this.count++
                }
            }
        })
        const vm = new Vue({
            el:"#app",
            data(){
                return{

                }
            }
        })
    </script>

局部组件

局部组件，只能在当前vue实例挂载的对象中使用，类似于局部变量，有块级作用域。

使用方式与全局变量一样，直接使用<hello-world></hello-world>调用

复制代码

<div id="app">
        <hello-world></hello-world>
        <hello-tom></hello-tom>
        <hello-jerry></hello-jerry>
    </div>
    <script src="./vue.js"></script>
    <script>
        let HelloWorld ={
            data:function(){
                return{
                    msg:'HelloWorld'
                }
            },
            template:`<div>{{msg}}</div>`
        };
        let HelloTom ={
            data:function(){
                return{
                    msg:'HelloTom'
                }
            },
            template:`<div>{{msg}}</div>`
        };
        let HelloJerry ={
            data:function(){
                return{
                    msg:'HelloJerry'
                }
            },
            template:`<div>{{msg}}</div>`
        }
        const vm = new Vue({
            el:"#app",
            data:{
   
            },
            components:{
              'hello-world': HelloWorld,
              'hello-tom': HelloTom,  
              'hello-jerry': HelloJerry,
            }
        })
    </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

    <div id="app">
        <hello-world></hello-world>
        <hello-tom></hello-tom>
        <hello-jerry></hello-jerry>
    </div>
    <script src="./vue.js"></script>
    <script>
        let HelloWorld ={
            data:function(){
                return{
                    msg:'HelloWorld'
                }
            },
            template:`<div>{{msg}}</div>`
        };
        let HelloTom ={
            data:function(){
                return{
                    msg:'HelloTom'
                }
            },
            template:`<div>{{msg}}</div>`
        };
        let HelloJerry ={
            data:function(){
                return{
                    msg:'HelloJerry'
                }
            },
            template:`<div>{{msg}}</div>`
        }
        const vm = new Vue({
            el:"#app",
            data:{
   
            },
            components:{
              'hello-world': HelloWorld,
              'hello-tom': HelloTom,  
              'hello-jerry': HelloJerry,
            }
        })
    </script>

三、父组件和子组件的区别

上述代码中定义了两个组件对象cpn1和cpn2，在组件cpn2中使用局部组件注册了cpn1，并在template中使用了注册的cpn1，然后在vue实例中使用注册了局部组件cpn2，在vue实例挂载的div中调用了cpn2，cpn2与cpn1形成父子组件关系。

注意：组件就是一个vue实例，vue实例的属性，组件也可以有，例如data、methods、computed等。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div id="app">
    <cpn2></cpn2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    // 1.创建组件构造器对象
    const cpn1 = Vue.extend({
      template:`
        <div>
          <h2>标题1</h2>
          <p>组件1</p>
        </div>`
    })
    // 组件2中使用组件1
    const cpn2 = Vue.extend({
      template:`
        <div>
          <h2>标题2</h2>
          <p>组件2</p>
          <cpn1></cpn1>
        </div>`,
      components:{
        cpn1:cpn1
      }
    })

    const app = new Vue({
      el:"#app",
      components:{//局部组件创建
        cpn2:cpn2
      }
    })
  </script>