【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 根实例中，把这个组件作为自定义元素来使用：

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

使用组件
```
<div id="app"> 
        <button-counter>button-counter>
    div>
    <script src="./vue.js">script>
    <script>
        Vue.component('button-counter',{
            data:function(){ //必须是函数
                return{
                    count:0
                }
            },
            template:'',//只能有一个根元素
            methods:{
                handle:function(){
                    this.count++
                }
            }
        })
 
        const vm = new Vue({
            el:"#app",
            data(){
                return{
 
                }
            }
        })
    script>
```
二、全局组件和局部组件

全局注册，通过 Vue.component

局部注册，通过 components:{}

全局组件

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

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

第二个全局组件通过

实现了在渲染
```
    "app"> 
        <button-counter>button-counter>
        <hello-world>hello-world>
    
```
<script src="./vue.js">script>
<script>
Vue.component('HelloWorld',{
data(){
return{
msg:"HelloWorld"
}
},
template:`{{msg}} `
})
Vue.component('button-counter',{
data:function(){ //必须是函数
return{
count:0
}
},
template:`
`,

//只能有一个根元素

methods:{

                handle:function(){

this.count++

}

})

        const vm = new Vue({

el:"#app",

data(){

return{

}

})

script>

局部组件

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

使用方式与全局变量一样，直接使用调用


 
    "app">
        <hello-world>hello-world>
        <hello-tom>hello-tom>
        <hello-jerry>hello-jerry>

    <script src="./vue.js">script>

<script>

let HelloWorld ={

            data:function(){

return{

msg:'HelloWorld'

}

},

            template:`{{msg}}
`

};

let HelloTom ={

            data:function(){

return{

msg:'HelloTom'

}

},

            template:`{{msg}}
`

};

let HelloJerry ={

            data:function(){

return{

msg:'HelloJerry'

}

},

            template:`{{msg}}
`

}

        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>标题1h2>
          <p>组件1p>
        div>`
    })
    // 组件2中使用组件1
    const cpn2 = Vue.extend({
      template:`
        <div>
          <h2>标题2h2>
          <p>组件2p>
          <cpn1>cpn1>
        div>`,
      components:{
        cpn1:cpn1
      }
    })
 
    const app = new Vue({
      el:"#app",
      components:{//局部组件创建
        cpn2:cpn2
      }
    })
  script>

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

前言：

完整内容请关注：

一、组件的基本使用

二、全局组件和局部组件

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

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

全局组件

局部组件

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

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

前言：

完整内容请关注：

一、组件的基本使用

二、全局组件和局部组件

全局注册，通过 Vue.component

局部注册，通过 components:{}

全局组件

局部组件

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

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

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

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