vue组件component的使用

一、全局注册组件

全局注册就是在构造器的外部用Vue.component来注册。
1.如何定义一个组件

 <div id="app">
       <wzq></wzq>
    </div>
    <script>
        Vue.component('wzq',{
            template:`<h1>你好</h1>`
        }) 
        var app = new new Vue({
            el:'#app',
            data:{
              message:'hello'
            }  
        })
    </script>    

Vue.component(‘组件名’，{
模板或者需要呈现的样式
})
可以在不同的构造器中多次调用

二、局部注册组件

局部注册组件和全局注册组件是向对应的，局部注册的组件只能在组件注册的作用域里进行使用，其他作用域使用无效。

 <div id="app">
       <wzq></wzq>
    </div>
    <script>
        var app = new new Vue({
            el:'#app',
            data:{
              message:'hello'
            },
            components: {
                "wzq":{
                    template:`<h1>局部组件</h1>`
                }
            }  
        })
    </script>    

在指定的构造器中定义，在当前构造器的作用域下使用。构造器中的components是一个对象，可以注册多个组件。

三、组件与指令的区别

组件注册的是一个标签，而指令注册的是已有标签里的一个属性。在实际开发中我们还是用组件比较多，指令用的比较少。

四、组件的props属性设置

props选项就是设置和获取标签上的属性值的，定义属性的选项是props。

    <div id="app">
       <wzq a="132"></wzq>
    </div>
    <script>
        var app = new new Vue({
            el:'#app',
            data:{
              message:'hello'
            },
            components: {
                "wzq":{
                    template:`<h1>props属性传值{{a}}</h1>`,
                    props: ['a']
                }
            }  
        })
    </script>   

通过属性将获取自定义组件的值。如果属性词中用到了‘-’来实现分词，需要使用小驼峰命名，否则报错。
例如 如果props里写成props:[‘a-b’]是错误的，必须用小驼峰式写法props:[‘aB’]。
1.如何将data的值传到组件中
需要用到vue的绑定指令。

  <div id="app">
       <wzq v-bind:a="message"></wzq>
    </div>
    <script>
        var app = new new Vue({
            el:'#app',
            data:{
              message:'hello'
            },
            components: {
                "wzq":{
                    template:`<h1>props属性传值{{a}}</h1>`,
                    props: ['a']
                }
            }  
        })
    </script>    

五、父子组件关系

在实际开发中我们经常会遇到在一个自定义组件中要使用其他自定义组件，这就需要一个父子组件关系。
如果组件代码量很大，会影响构造器的可读性，造成拖拉和错误。可以通过将组件编写的代码放到构造器外部或者说单独文件可以解决这一问题。

<div id="app">
       <wzq v-bind:a="message"></wzq>
    </div>
    <script>
        var wzq = {
            template:`<h1>父子组件</h1>`,
        }
        var app = new new Vue({
            el:'#app',
            data:{
              message:'hello'
            },
            components: {
                "wzq":wzq
            }  
        })
    </script>    

父子组件嵌套

 <div id="app">
       <wzq></wzq>
    </div>
    <script>
        var wzx = {
            template:`<h1>子组件</h1>`,
        }
        var wzq = {
            template:`<h1>父组件 <wzx></wzx></h1>
           `,
            components: {
                'wzx':wzx
            }
           
        }
      
        var app = new new Vue({
            el:'#app',
            data:{
              message:'hello'
            },
            components: {
                "wzq":wzq
            }  
        })
    </script>