VUE

[ynchuan]

vue模板编译工具

组件

• slot : 放在子组件中，用来盛放父组件引用子组件的子节点

child: 
<div>
    <slot name='notice'>HAHA</slot> BALABALA
</div>
parent: 
<child>
    <div slot='notice'>HEIHEI</div>
</child>

child: 
<div>
    <slot name='notice' :data='user'>HAHA</slot> BALABALA
</div>
parent: 
<child>
     <template slot-scope='prop' slot='notice'>
         <div>{{prop.data}}</div>
     </template>
</child>

<child>
    <template slot-scope='prop' slot='notice'>
        <div>{{prop.data}}</div>
    </template>
</child>
<child>
    <div slot='notice'>HEIHEI</div>
</child>

child: {
    data: () => {
        return {
            data: 'inner subCompontent Data'
        }
    },
    template: `
        <div>
            CHILD COMPONENT
            <slot name='notice' :data=data></slot>
        </div>`
}

• component 实现动态组件
• keep-alive 包裹的内部组件不会销毁，会被缓存
• transition 包裹的内容上发生变化，添加过渡效果

<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

事件

只有组件节点才可以添加自定义事件，并且添加原生 DOM 事件需要使用 native 修饰符；而普通元素使用 .native 修饰符是没有作用的，也只能添加原生 DOM 事件。