关于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>