组件

用途

• 组件可以复用减少很多无必要的代码，并且每个组件不相互影响
• 首先
  • 创建组件
  • 在父组件中引入 1.improt 2.在components {组件名字：与引入组件的名字}
  • 在页面写上自定义组件的标签

代码

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

  // 函数调用的方式创建组件

  // 身体组件
  var MyBody = Vue.extend({
    template: '<div>我是函数调用方式的身体组件</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>