深入了解Vue.js组件笔记

Vue.component('name',{}) 创建的组件都是全局组件，它们在注册之后可以用在任何新创建的Vue根实例(new Vue)的模板中。第一个参数是组件的名字，第二个参数是一个方法，可以在其中定义组件的data数据、template模板、props传值、components组件注册、computed计算属性、method方法、watch监听数据变化、以及生命周期的构子函数：beforeCreate、created、beforeMount、mounted、beforeupdate、updated、beforeDestroy、destroyed。
推荐创建一个 components 目录，并将每个组件放置在其各自的文件中：
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
  components: {
    ComponentA,
    ComponentC
  }
}

1、事件名建议始终使用短横线连接的方式如：my-event
2、自定义组件的 v-model：
    Vue.component('base-checkbox', {
      model: {
        prop: 'checked',
        event: 'change'
      },
      props: {
        checked: Boolean
      },
      template: `
        <input
          type="checkbox"
          v-bind:checked="checked"
          v-on:change="$emit('change', $event.target.checked)"
        >
      `
    })
    <base-checkbox v-model="lovingVue"></base-checkbox>

1、组件：<base-layout>：
    <div class="container">
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <slot></slot>
        </main>
        <footer>
            <slot name='footer'></slot>
        </footer>
        <slot name="footer"></slot>
    </div>
    
    <base-layout>
        <template slot='header'>
            <h3>我是Header</h3>
        </template>
        <p>我没有名字</p>
        <p>显示在默认插槽</p>
        <h3 slot='footer'>具名插槽2</h3>
    </base-layout>
    结果：
    <div class="container">
        <header>
            <h3>我是Header</h3>
        </header>
        <main>
            <p>我没有名字</p>
            <p>显示在默认插槽</p>
        </main>
        <footer>
            <h3>具名插槽2</h3>
        </footer>
    </div>

<!-- 失活的组件将会被缓存！-->
<keep-alive>    //<keep-alive>缓存组件切换状态，组件必须有名字
  <component v-bind:is="currentTabComponent"></component>    //is 特性来切换不同的组件
</keep-alive>