组件定义和使用

组件

组件可以扩展 HTML 元素，封装可重用的代码。vue中的组件分为全局组件和局部组件

全局组件

全局组件：
Vue.component(组件名（不能是已经存在的html标签），{配置项})
在配置项中，除了没有 el项 和要有 template项 外，其他的跟vm一样

    // 全局组件
    Vue.component('my-h1', {
      data() {  // 组件中的data必须是一个函数(函数返回一个对象)：是为了保证数据的独立
        return {
          name: '我是全局组件'
        }
      
      },
      template: `<h2 @click="fn">{{name}}</h2>`,  // 没有el属性，而是 template。注意：模板只能有一个根元素
     // 也可以有自己的 methods属性
      methods:{
        fn(){
          console.log(haha);
          alert('我是全局组件')
        }
      }
    });
// 全局组件不需要注册就可以直接使用

局部组件

局部组件是只有配置项内容，在使用的时候，哪个组件需要用到，哪个组件通过components来注册局部组件。注册过个局部组件就可以在该组件的模板 template 中使用了

// 局部组件：想在哪个组件中使用，就得在哪个组件中注册
     let haha = {
      // 这是局部组件的配置项
      data() {
        return {
          name: '我是局部组件'
        }
      },
      template: `<p>{{name}}</p>` // 只能有一个根元素
    };
let vm = new Vue({
      el: '#app',
      data: {
        name: '测试'
      },
      // 注册局部组件
      components: {
        // 组件名：组件配置
        part: haha  // 这里注册过后就可以去 根组件-app下面使用了
      }
    });

<div id="app">
    <h1>{{name}}</h1>
    <my-h1></my-h1> <!-- 全剧组件（不需要注册） -->
    <part></part> <!-- 局部组件（需要注册） -->
  </div>

！注意：不管是全剧组件还是局部组件，其模板（template）中只能有一个跟元素。