組件註冊

全局註冊

• Vue.component('組件名稱', { }) 第1個參數是標籤名稱，第2個參數是一個選項對象

• 全局組件註冊後，任何vue實例均可以用

組件基礎用

<div id="example">
  <!-- 二、 組件使用 組件名稱 是以HTML標籤的形式使用 -->  
  <my-component></my-component>
</div>
<script>
    //   註冊組件 
    // 一、 my-component 就是組件中自定義的標籤名
 Vue.component('my-component', {
      template: '<div>A custom component!</div>'
   })
​
    // 建立根實例
    new Vue({
      el: '#example'
   })
​
</script>

組件注意事項

• 組件參數的data值必須是函數同時這個函數要求返回一個對象

• 組件模板必須是單個根元素

• 組件模板的內容能夠是模板字符串

  <div id="app">
     <!-- 
  四、 組件能夠重複使用屢次 
      由於data中返回的是一個對象因此每一個組件中的數據是私有的
   即每一個實例能夠維護一份被返回對象的獨立的拷貝   
 --> 
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
      <!-- 八、必須使用短橫線的方式使用組件 -->
     <hello-world></hello-world>
  </div>
​
<script type="text/javascript">
 //5 若是使用駝峯式命名組件，那麼在使用組件的時候，只能在字符串模板中用駝峯的方式使用組件，
    // 七、可是在普通的標籤模板中，必須使用短橫線的方式使用組件
     Vue.component('HelloWorld', {
      data: function(){
        return {
          msg: 'HelloWorld'
       }
     },
      template: '<div>{{msg}}</div>'
   });
    
    
    
    Vue.component('button-counter', {
      // 一、組件參數的data值必須是函數 
      // 同時這個函數要求返回一個對象  
      data: function(){
        return {
          count: 0
       }
     },
      // 二、組件模板必須是單個根元素
      // 三、組件模板的內容能夠是模板字符串  
      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">
      <hello-world></hello-world>
  </div>
​
<script>
     // 定義組件的模板
    var HelloWorld = {
            data: function () {
                return {
                    msg: 'helloWorld'
               }
           },
            template: `<div>{{msg}}</div>`
​
       }
        var vm = new Vue({
            el: '#app',
            data: {},
            components: {
                //局部組件只在父模板可用 必定要在實例上註冊了才能在html文件中使用
                'hello-world': HelloWorld,
           }
       })
 </script>