组件

Vue.component("",{})
多次使用同一个组件，每个使用组件都会各自独立维护它的数据。因为你每用一次组件，就会有一个它的新实例被创建
一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝

data必须是一个函数
data(){
    return {
        
    }
}
或者
data:function(){
    return {
        
    }
}
或者
data:()=>{
    return {
        
    }
}

两种组件的注册类型：全局注册和局部注册

在组件的模板中，每个模板必须只有一个根元素。你可以将模板的内容包裹在一个父元素内，来修复这个问题

//错误的
Vue.component("c-hf",{
    data:function(){
        return {
            count: 0
        }
    },
    props:[],
    template:'
        <h3>{{ title }}</h3>
        <div v-html="content"></div>
    ',
})
//正确的
Vue.component("c-hf",{
    data:function(){
        return {
            count: 0
        }
    },
    props:[],
    template:'
        <div class="blog-post">
            <h3>{{ title }}</h3>
            <div v-html="content"></div>
        </div>
    ',
})

在组建上使用v-model

记住
<input v-model="searchText">
等于
<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>
当用在组件上时，v-model 则会这样：
<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

为了让它正常工作，这个组件内的 <input> 必须：

将其 value 特性绑定到一个名叫 value 的 prop 上
在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出
Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})
现在 v-model 就应该可以在这个组件上完美地工作起来了：
<custom-input v-model="searchText"></custom-input>

全局注册的组件在各自内部也都可以相互使用
局部注册的组件在其子组件中不可用，如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：

var ComponentA = { /* ... */ }
var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}

注意在 ES2015+ 中，在对象中放一个类似 ComponentA 的变量名其实是 ComponentA: ComponentA 的缩写，即这个变量名同时是