组件插槽

单个插槽

  • 如果我们希望组件标签可以像HTML标签一样设置内容，那么组件的使用灵活度会很高。

    示例内容

    实力内容2
  • 但平常我们书写的组件，组件首尾标签中书写的内容会被抛弃。（上面的“实力内容2”）
  • 我们需要通过进行插槽设置。Vue.component(‘com-a’,{ template:<div> <p>示例内容</p> <slot></slot> // 插槽 </div> })自定义组件内添加内容，替换slot标签，普通文本和标签都可设置成功
    示例内容 组件主体
    注意：
  • 模板内容的渲染位置
    • 当前结构模板属于父组件的视图
    • 内部所以内容，代码，数据都是由父组件进行模板渲染的
    • 插槽是父组件给子组件设置的，数据是父组件的数据（当然也可以使用子组件数据，通过作用域插槽后面讲）
    • 父级组件模板的所有内容都是在父级作用域中编译执行，子组件模板的内容在子组件作用域内编译执行
      这里只能访问父组件的数据 {{ parValue }}
      new Vue({ data:{ parValue:’父组件数据’ }, components:{ ComA } })var ComA={ template:<div> <p>组件A：{{ value }}</p> <slot></slot> </div>, data(){ return { value:’子组件数据’ } } }
  • 插槽的作用是组件对当前子组件的内容进行便捷设置，内容由父组件进行设置

  • 如果父组件并没有传入数据，我们可以在中为插槽设置默认值，也称为后备内容。var ComA={ template:<div> <p>组件A：</p> <slot>这是默认文本</slot> // 默认值 </div>, data(){ return { value:’子组件数据’ } } }<div id=”app”> // 插槽没接收到值，显示默认值 </div>

    具名插槽

  • 如果组件中有多个位置需要设置插槽,据需要给设置name，称为具名插槽。

子组件结构内内设置多个插槽
Vue.component(‘ComA’,{ template:<div> <header> <slot name="header"></slot> // 具名 </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div> })
父组件使用插槽，传入数据

  • template 是占位符，不显示标签
  • v-slot 只能在template中设置
  • 未设置具名的插槽，默认为default
  • 默认slot可以简写,所有没有被v-slot指定的插槽内容都被认为是 默认插槽内容
  • 具名可以简写为#header #footer
  • 具名插槽只能分配具名对应的内容，无法显示默认内容

  • 一般内容比较多的插槽部分，设置为 default 形式 简写形式

    组件主体内容

    作用域插槽

  • 插槽可以由父组件向子组件便捷内容设置，但是由于组件渲染规则，组件插槽内部只能使用父组件的数据，因为这段结构是父组件渲染的

  • 如果希望父组件插槽内部使用子组件数据的话，需要使用作用域插槽进行设置
  • 作用域插槽：用于让插槽可以使用子组件的数据。

组件将需要被插槽使用的数据通过v-bind绑定给，这种用于给插槽传递数据的属性称为插槽prop。
子组件插槽绑定
// 子组件选项对象 var ComA = { template:<div> <p>组件A：</p> <slot :value="value">这是默认文本</slot> </div>, data(){ return { value:”子组件数据” } } }
父组件接收数据

  • 子组件绑定数据后，父组件的插槽中需要通过v-slot接收数据。
  • 接收的是包含所有插槽prop的对象（子组件可以绑定多个属性传递，都在这个对象中），可以给对象任意命名
  • 如果只存在默认插槽，同时又需要接收数据，可以进行简写（特殊）
    {{ dataObj.value }}
  • 再次简写，注意： 之前操作 v-slot 可简写成 #。 但是 v-slot:default=”数据” 写成#=数据 不可以
  • 存在slot名称的时候才能用#简化，当前情况只是接收数据，不具备名称功能

  • default 和 v-slot 均可
    {{ dataObj.value }}
    {{ dataObj.value }}

  • 还可以通过ES6的解构操作进行数据接收。
    {{ value }}