Vue基础组件入门

什么是组件？

组件 (Component) 是 Vue.js 最强大的功能之一

• 组件可以扩展 HTML 元素，封装可重用的代码

组件注册

全局注册

• Vue.component(‘组件名称’, { }) 第1个参数是标签名称，第2个参数是一个选项对象
• 全局组件注册后，任何vue实例都可以用

组件的基础用法

    <div id="example">
      <!-- 2、 组件使用 组件名称 是以HTML标签的形式使用  -->  
      <my-component></my-component>
    </div>
    <script>
        //   注册组件 
        // 1、 my-component 就是组件中自定义的标签名
    	Vue.component('my-component', {
          template: '<div>A custom component!</div>'
        })
    
        // 创建根实例
        new Vue({
          el: '#example'
        })
    
    </script>

组件注意事项

• 组件参数的data值必须是函数同时这个函数要求返回一个对象
• 组件模板必须是单个根元素，单页面组件的template内的标签必须要有一个根节点
• 全局注册的组件使用时不能使用单标签(不会报错,但是只能使用一次 多次使用只显示第一个)
• 组件模板的内容可以是模板字符串

    <div id="app">
         <!-- 
    		4、  组件可以重复使用多次 
    	      因为data中返回的是一个对象所以每个组件中的数据是私有的
    		  即每个实例可以维护一份被返回对象的独立的拷贝   
    	--> 
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>
          <!-- 8、必须使用短横线的方式使用组件 -->
         <hello-world></hello-world>
      </div>
    
    <script type="text/javascript">
    	//5  如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，
        // 7、但是在普通的标签模板中，必须使用短横线的方式使用组件（驼峰命名法）
         Vue.component('HelloWorld', {
          data: function(){
            return {
              msg: 'HelloWorld'
            }
          },
          template: '<div>{{msg}}</div>'
        });
        
        
        
        Vue.component('button-counter', {
          // 1、组件参数的data值必须是函数 
          // 同时这个函数要求返回一个对象  
          data: function(){
            return {
              count: 0
            }
          },
          //  2、组件模板必须是单个根元素
          //  3、组件模板的内容可以是模板字符串  
          template: `
            <div>
              <button @click="handle">点击了{{count}}次</button>
              <button>测试123</button>
    			#  6 在字符串模板中可以使用驼峰的方式使用组件	
    		   <HelloWorld></HelloWorld>
            </div>
          `,
          methods: {
            handle: function(){
              this.count += 2;
            }
          }
        })
        var vm = new Vue({
          el: '#app',
          data: {
            
          }
        });
      </script>

局部注册

• 只能在当前注册它的vue实例中使用

    <div id="app">
          <my-component></my-component>
      </div>
       <script>
        // 定义组件的模板
        var Child = {
          template: '<div>A custom component!</div>'
        }
        new Vue({
          //局部注册组件  
          components: {
            // <my-component> 将只在父模板可用  一定要在实例上注册了才能在html文件中使用
            'my-component': Child
          }
        })
     </script>