Vue教程之插槽

在 Vue 中插槽说白了就是 “占位”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填入，替换组件模板中slot位置，并且可以作为承载分发内容的出口。

默认插槽

没有具体名字，可以随意存放内容，就是默认插槽。

实例演示

父组件

<template>
  <div>
    <Demo9>
      lanyulei
    </Demo9>
  </div>
</template>

<script>
import Demo9 from './components/Demo9'
export default {
  components: {
    Demo9
  }
}
</script>

子组件，替换 slot 标签的位置。

<template>
  <div>
    <h1>hello, <slot></slot></h1>
  </div>
</template>

作用域插槽

作用域插槽其实就是为了让父组件能够访问子组件的才有的数据。

实例演示

父组件

<template>
  <div>
    <Demo9>
      <template slot-scope="row">
        <li>{{ row.item }}</li>
      </template>
    </Demo9>
  </div>
</template>

<script>
import Demo9 from './components/Demo9'
export default {
  components: {
    Demo9
  }
}
</script>

子组件

<template>
  <div>
    <ul>
      <slot v-for="item of list" :item="item"></slot>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [1, 2, 3]
    }
  }
}
</script>

具名插槽

说白了就是给插槽定义一个名字，然后通过名字来插入数据。

实例演示

父组件

<template>
  <div>
    <Demo9>
      <h1 slot="name">兰玉磊</h1>
      <h1 slot="remarks">帅哥</h1>
    </Demo9>
  </div>
</template>

<script>
import Demo9 from './components/Demo9'
export default {
  components: {
    Demo9
  }
}
</script>

子组件

<template>
  <div>
    <slot name="name"></slot>
    是个
    <slot name="remarks"></slot>
  </div>
</template>