Vue 插槽

Posted 2021-03-09 wepedblogs

组件的插槽：

• 为了使我们封装的组件更加具有扩展性
• 可以使使用者决定组件内部的内容要展现什么

<!-- 渲染时就会将<slot></slot>替换为自己想显示的内容 -->
    <cpn><button>按钮</button></cpn>
    <cpn><span>腻害</span></cpn>
    <cpn></cpn>
    <cpn></cpn>
  </div>
  <template id="cpn">
    <div>
      <p>道阻且长，行则将至！！！</p>
      <slot><button>点一下</button></slot>
    </div>
  </template>

具名插槽：其实就是给插槽起名字

有多个插槽时，若想只是替换其中部分，则可以给插槽起名字

 <div id="app">
    <!-- 渲染时就会将<slot></slot>替换为自己想显示的内容 -->
    <cpn><span slot="first">点一下</span></cpn>
  </div>

  <template id="cpn">
    <div>
      <p>道阻且长，行则将至！！！</p>
      <slot name="first"><span>按钮</span></slot>
    </div>
  </template>

编译作用域： 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

作用域插槽：父组件替换插槽的内容，但是内容由子组件来提供，就是父组件对子组件展示的数据展示不满意，想以另一种方式展示的时候，就从子组件中拿到数据，然后再做展示。