关于javascript:vue小点记录

vue插槽

• 插槽内容（能够放任何货色），在组件加<slot></slot>

示例：
Vue.component('child',{
    template:`
        <div>
            Hello,World!
            <slot></slot>
        </div>
    `
})

• 具名插槽（顾名思义就是给插槽起个名字）

组件：给组件命名，aaa，bbb
Vue.component('child-component',{
    template:` <div>
        <h4>具名插槽组件</h4>

        <slot name="aaa"></slot>

        <div ></div>

        <slot name="bbb"></slot>

        <div ></div>

        <slot></slot>
        </div>
`
})

应用：
<div id="app">
    <child>
        <template slot="aaa">
            aaa
        </template>
        <template slot="bbb">
            bbb
        </template>
        <div>你谁啊，
            我是默认的插槽啊 </div>
    </child>
</div>

• 作用域插槽（组件上的属性，能够在组件元素内应用）

在<slot></slot>元素上定义一个属性work，应用组件child，在组件内template元素增加属性slot-scope命名为setWork

组件定义：
Vue.component('child',{
    template:` <div>
            <slot work="你好"></slot>
        </div>
        `
})

应用：
<div id="app">
    <child>
        <template slot-scope="setWork">
　　　　　　<!-- {"work":"你好，你在哪里工作"} -->
            {{setWork}}
        </template>
    </child>
</div>