15

1、组件注册

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
  }
}

2、Prop

  • 由于浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop名需要使用其等价的 kebab-case (短横线分隔命名) 命名。prop可以是任何类型的数据、变量或对象,当prop是对象时,即使对象是静态的也必须使用v-bind。不要在子组件中改变prop的数据,可以在自身的data里保存一份该prop属性

       Vue.component('user', {
         props: ['sayHello']
       })
       <user say-Hello="hello!"></user>
    我们可以传递静态Prop(如上),也可以使用v-bind传递动态Prop(如下)
    <user :title="post.title"></user>
    
  • prop验证(控制传入组件数据的类型)
    Vue.component('mycomponent',{

       props:{
           propZ:null,    //匹配任何类型
           propA:Number,    //数字类型
           propB:[Number,String],    //多个可能的类型
           propC:{
               type:String,
               required:true,    //必填
               default:'Hello'    //默认
           },
           propD:{
               type:Object,    //对象类型
               default:function(){    //默认函数
                   return {
                       msg:'hello'
                   }
               }
           },
           propE:{
               //自定义验证
               validator: function (value) {
                   // 这个值必须匹配下列字符串中的一个
                   return ['success', 'warning', 'danger'].indexOf(value) !== -1
               }
           },
           user:Person
       }

    })

3、自定义事件

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>

4、插槽<slot>

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>

5、动态组件与异步组件

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

蔡万胜
625 声望40 粉丝