Vue 04组件化

组件

用途

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

代码

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

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

  // 身体组件
  var MyBody = Vue.extend({
    template: '
我是函数调用方式的身体组件
'
  })
  /* 
  var MyBody = {
    template: '
我是身体组件
'
  } 
  */

  // 底部组件
  var MyFooter = {
    template:
      '
我是底部组件点我
',
    methods: {
      showNum: function(num) {
        alert(num);
      }
    }
  };

  // 声明入口组件
  var App = {
    components: {
      "my-herder": MyHeader,
      "my-body": MyBody,
      "my-footer": MyFooter
    },
    template: `
                

                  
                  
                  
                
              `
  };
  new Vue({
    el: "#app",
    // 声明要用的组件们
    components: {
      // key 组件名，value组件对象
      app: App
    },
    data: function() {
      return {};
    },
    template: "",
    methods: {}
  });