1、基本用法
插槽指允许将自定义的组件像普通标签一样插入内容
import Vue from 'vue'// 定义组件componentOne const compoentOne = {template: `<div :style="style1"><slot></slot> // 定义插槽</div>`,data () {return {style1: {width: '200px',height: '200px'border: '1px solid #ccc'}}} }// 调用组件new Vue({components: {ComOne: componentOne },el: '#id',data () {return {val1: '123'}},template: `<div><com-one><span>{{val1}}</span> // 使用插槽</com-one></div>`})
2、具名插槽
给具体的插槽命名，并在使用的时候传入插槽的名称
import Vue from 'vue'// 定义组件componentOne const compoentOne = {template: `<div :style="style1"><div><slot name="header"></slot> // 定义一个名称为header的插槽</div><div><slot name="body"></slot> // 定义一个名称为body的插槽</div></div>`,data () {return {style1: {width: '200px',height: '200px'border: '1px solid #ccc'}}} }// 调用组件new Vue({components: {ComOne: componentOne },el: '#id',data () {return {val1: '123',val2: '456'}},template: `<div><com-one><span slot="header">{{val1}}</span> // 使用插槽'header**重点内容**'<span slot="body">{{val2}}</span> // 使用插槽'body'</com-one></div>`})
3、作用域插槽
将定义插槽的变量作用域到使用插槽中
import Vue from 'vue'// 定义组件componentOne const compoentOne = {template: `<div :style="style1"><slot :aa="val1" :bb="val2"></slot> // 给插槽传入变量</div>`,data () {return {style1: {width: '200px',height: '200px'border: '1px solid #ccc'},val1: 'slot1',val2: 'slot2'}} }// 调用组件new Vue({components: {ComOne: componentOne },el: '#id',data () {return {val1: '123'}},template: `<div><com-one><span slot-scope="props">{{props.aa}}{{props.bb}}{{val1}}</span> // 定义插槽传入的对象props,并使用</com-one></div>`})
