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

前言：

完整内容请关注：

(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>使用组件

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

实现了在渲染

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

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

​ 上述代码中定义了两个组件对象

cpn1

和

cpn2

，在组件

cpn2

中使用局部组件注册了

cpn1

，并在

template

中使用了注册的

cpn1

，然后在vue实例中使用注册了局部组件

cpn2

，在vue实例挂载的div中调用了

cpn2

，

cpn2

与

cpn1

形成父子组件关系。

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

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