关于vue.js:Vue-组件插槽

组件插槽

单个插槽

• 如果咱们心愿组件标签能够像 HTML 标签一样设置内容，那么组件的应用灵便度会很高。

  <div id="app">
  <p> 示例内容 </p>
  <com-a> 实力内容 2 </com-a>
  </div>

• 但平时咱们书写的组件，组件首尾标签中书写的内容会被摈弃。（下面的“实力内容 2”）

• 咱们须要通过 <slot> 进行插槽设置。

  Vue.component('com-a',{
  template:`
    <div>
      <p> 示例内容 </p>
      <slot></slot> // 插槽
    </div>
  `
  })

  自定义组件内增加内容，替换 slot 标签，一般文本和标签都可设置胜利

  <div id="app">
  <com-a>
    示例内容
    <span> 组件主体 </span>
  </com-a>
  </div>

  留神：

• 模板内容的渲染地位

  • 以后构造模板属于父组件的视图
  • 外部所以内容，代码，数据都是由父组件进行模板渲染的
  • 插槽是父组件给子组件设置的，数据是父组件的数据（当然也能够应用子组件数据，通过作用域插槽前面讲）

  • 父级组件模板的所有内容都是在父级作用域中编译执行，子组件模板的内容在子组件作用域内编译执行

    <div id="app">
    <com-a>
    这里只能拜访父组件的数据
    {{parValue}}
    </com-a>
    </div>

    new Vue({data:{ parValue:'父组件数据'},
    components:{ComA}
    })

    var ComA={
    template:`
    <div>
      <p> 组件 A：{{value}}</p>
      <slot></slot>
    </div>
    `,
    data(){
    return {value:'子组件数据'}
    }
    }

• 插槽的作用是组件对以后子组件的内容进行便捷设置，内容由父组件进行设置

• 如果父组件并没有传入数据，咱们能够在 <slot> 中为插槽设置默认值，也称为后备内容。

  var ComA={
  template:`
    <div>
      <p> 组件 A：</p>
      <slot> 这是默认文本 </slot>  // 默认值
    </div>
  `,
  data(){
    return {value:'子组件数据'}
  }
  }

  <div id="app">
  <com-a></com-a>  // 插槽没接管到值，显示默认值
  </div>

  具名插槽

• 如果组件中有多个地位须要设置插槽, 据须要给 <slot> 设置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 模式

  <com-a>
  <template v-slot:header> // 设置
    <h1> 组件头部内容 </h1>
  </template>
  
  <template v-slot:default> // 默认
    <p> 组件主体内容 </p>
  </template>
  
  <template v-slot:footer>
    <p> 组件底部内容 </p>
  </template>
  </com-a>

  简写模式

  <com-a>
  <template #header>
    <h1> 组件头部内容 </h1>
  </template>
  
  <p> 组件主体内容 </p>
  
  <template #footer>
    <p> 组件底部内容 </p>
  </template>
  </com-a>

  作用域插槽

• 插槽能够由父组件向子组件便捷内容设置，然而因为组件渲染规定，组件插槽外部只能应用父组件的数据，因为这段构造是父组件渲染的
• 如果心愿父组件插槽外部应用子组件数据的话，须要应用作用域插槽进行设置
• 作用域插槽：用于让插槽能够应用子组件的数据。

组件将须要被插槽应用的数据通过 v -bind 绑定给 <slot>，这种用于给插槽传递数据的属性称为 插槽 prop。

子组件插槽绑定

// 子组件选项对象

var ComA = {
  template:`
    <div>
      <p> 组件 A：</p>
      <slot :value="value"> 这是默认文本 </slot>
    </div>
  `,
  data(){
    return {value:"子组件数据"}
  }
}

父组件接收数据

• 子组件绑定数据后，父组件的插槽中须要通过 v -slot 接收数据。

• 接管的是蕴含所有插槽 prop 的对象（子组件能够绑定多个属性传递，都在这个对象中），能够给对象任意命名

  <div id="app">
  <com-a>
    <template v-slot:default="dataObj"> 
      {{dataObj.value}}
    </template>
  </com-a>
  </div>

• 如果只存在默认插槽，同时又须要接收数据，能够进行简写（非凡）

  <div id="app">
  <com-a v-slot:default="dataObj">
    {{dataObj.value}}
  </com-a>
  </div>

• 再次简写，留神：之前操作 v-slot 可简写成 #。然而 v-slot:default="数据" 写成#= 数据 不能够
• 存在 slot 名称的时候能力用 # 简化，当前情况只是接收数据，不具备名称性能

• #default 和 v-slot 均可

  <div id="app">
  <com-a v-slot="dataObj">
    {{dataObj.value}}
  </com-a>
  </div>

  <div id="app">
  <com-a #default="dataObj">
    {{dataObj.value}}
  </com-a>
  </div>

• 还能够通过 ES6 的解构操作进行数据接管。

  <div id="app">
  <com-a #default="{value}">
    {{value}}
  </com-a>
  </div>