vue插槽

  • 插槽内容（能够放任何货色），在组件加<slot></slot>
示例：Vue.component('child',{    template:`        <div>            Hello,World!            <slot></slot>        </div>    `})
  • 具名插槽（顾名思义就是给插槽起个名字）
组件：给组件命名，aaa，bbbVue.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>