【Vue组件】

组件化和模块化的不同

模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一
高内聚，低耦合
组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

全局定义组件

1、使用 Vue.extend 配合 Vue.component 方法
2、直接使用 Vue.component 方法
3、将模板字符串，定义到script标签中，同时，需要使用 Vue.component 来定义组件
4、template模板里书写 ***
**注意： 不要使用内置或保留的HTML元素作为组件id 组件模板应该只包含一个根元素**
代码

<div id='app'>
  <!-- Html标签不区分大小写 -->
        <!-- <login></login> -->
        <mine></mine>
</div>
1、Vue.extend()  Vue.component()
let login = Vue.extend({
  template: '
我们都没病
'
})
Vue.component('login', login)
2、
Vue.component('login', {
  template: '
我们都没病
'
})
3、
<!-- <script type="x-template" id="login">
       <h1>登陆了</h1>
    </script> -->
Vue.component('login', {
  template: '#login'
})
4、
    <template id="mine">
        <div>
            我的页面
        </div>
    </template>
第一个参数：展示到页面的标签名
第二个参数：对象{template:""}
Vue.component('mine', {
  template: '#mine'
})

私有定义

components ：实例内，与data和methods同级
代码

<div id='app'>
  <!-- 不要使用内置或保留的HTML元素作为组件id:  -->
    <!-- <div></div> -->
      <mine></mine>
    </div>
    <template id="mine">
      <!-- 组件模板应该只包含一个根元素。 -->
        <div>
          我的页面
          <div>
            第二个元素
          </div>
          <div>
            第三个元素
          </div>
        </div>

      </template>

      const vm = new Vue({
        el: '#app',
      data: {
      },
      methods: {
      },
      components: {
        'mine': {
          template: "#mine"
      }
      }
      })