1_02 Vue Slot

slot 插槽

1. 插槽内容

const component =｛
	template: `
		<div>
			<slot></slot>
		</div>
	`
｝

new Vue ({
	components: {
		com: components
	},
	el: '#app',
	template: `
		<div>
			<com>
				this is contnent.
			</com>
		</div>
	`
})

1. 具名插槽

const component = {
	template: `
		<div>
			<slot name="header"></slot>
			<slot name="main"></slot>
			<slot name="footer"></slot>
		</div>
	`
}

new Vue({
	components: {
		component
	},
	el: '#app',
	template: `
		<div>
			<com>
				<template name="header">header</template>
				<template name="main">main</template>
				<template name="footer">footer</template>
			</com>
		</div>
	`
})

根据是否有插槽内容，来判断显示内容。vue提供$slots属性，每个具名插槽的name都是$slots的属性，但是有的直接使用<slot></slot>没有具名，则用$slots.default表示，如下例子：

const component = {
  template: `
    <div :style="style">
      <slot name="header"></slot>
      <slot v-if="$slots.default"></slot>
      <template v-if="!$slots.default">
        there are no data.
      </template>
      <slot name="footer" v-if="$slots.footer"></slot>
      <template v-if="!$slots.footer">
        if footer is not exsit, show the content.
      </template>
    </div>
  `,
  data () {
    return {
      style: {
        width: '200px',
        height: '200px',
        border: '1px solid #aaa',
      }
    }
  }
}

new Vue({
  components: {
    ComOne: component
  },
  el: '#app',
  template: `
    <div>
      <ComOne>
        <template slot="header">header</template>
      </ComOne>
    </div>
  `
});

1. slot-scope的用法

将子组件的属性通过 slot-scope 传递给父组件中对应子组件插槽内容中。

const component = {
  template: `
    <div :style="style">
      <slot :value="value"></slot>
    </div>
  `,
  props: {
    value: {
      default: 'liangcheng',
      type: String
    },
  },
  data () {
    return {
      style: {
        width: '200px',
        height: '200px',
        border: '1px solid #aaa',
      }
    }
  }
}

new Vue({
  components: {
    ComOne: component
  },
  el: '#app',
  template: `
    <div>
      <ComOne value="lc">
        <template slot-scope="props">{{ props.value }}</template>
      </ComOne>
    </div>
  `
});