vue 学习七 组件上使用插槽

我们有时候可能会在组件上添加元素，就像下面那样

<template>
  <div id="a">
    <com1>
      <p>我是渲染的值</p>  //直接在组件闭合内添加元素
    </com1>
  </div>
</template>

<script>
import com1 from "./b_router";
export default {
  name: "a_router",
  components: {
    com1
  },
  data() {
    return {
      test: "123"
    };
  },
  methods:{

  }
};
</script>

 

但是最终的渲染结果却是这样

幸好，Vue 自定义的 <slot> 元素让这变得非常简单。只需要在com组件中定义

<template>
  <div id="b">
    <h1>b_router</h1>
    <slot></slot> //添加一个slot元素
  </div>
</template>

<script>
export default {
  name: "b_router",
  data() {
    return {
        val:null
    };
  },
};
</script>

然后就可以了

slot标签在这里的作用就是将<com></com> 标签之间的代码添加进入slot中，我们可以像是用普通标签<div>一样使用，包括在其中添加一个组件、

<template>
  <div id="a">
    <com1>
       <com2></com2>//我是放入slot中的第二个组件
       <com1><com1/> //也可以将com1 放入com1中

    </com1>
  </div>
</template>