組件

用途

• 組件可以復(fù)用減少很多無必要的代碼，并且每個組件不相互影響
• 首先
  • 創(chuàng)建組件
  • 在父組件中引入 1.improt 2.在components {組件名字：與引入組件的名字}
  • 在頁面寫上自定義組件的標(biāo)簽

代碼

  // 頭組件
  var MyHeader = {
    template: "<div>我是頭組件</div>"
  };

  // 函數(shù)調(diào)用的方式創(chuàng)建組件

  // 身體組件
  var MyBody = Vue.extend({
    template: '<div>我是函數(shù)調(diào)用方式的身體組件</div>'
  })
  /* 
  var MyBody = {
    template: '<div>我是身體組件</div>'
  } 
  */

  // 底部組件
  var MyFooter = {
    template:
      '<div>我是底部組件<button @click="showNum(123)">點我</button></div>',
    methods: {
      showNum: function(num) {
        alert(num);
      }
    }
  };

  // 聲明入口組件
  var App = {
    components: {
      "my-herder": MyHeader,
      "my-body": MyBody,
      "my-footer": MyFooter
    },
    template: `
                <div>
                  <my-herder></my-herder>
                  <my-body></my-body>
                  <my-footer></my-footer>
                </div>
              `
  };
  new Vue({
    el: "#app",
    // 聲明要用的組件們
    components: {
      // key 組件名，value組件對象
      app: App
    },
    data: function() {
      return {};
    },
    template: "<app />",
    methods: {}
  });
  </script>