vue-cli 工程中 访问插槽 数据

具体解释参考文档

这个插槽啊 ，怎么说呢，如果你不开发组件，几乎很少用到，甚至用不到

访问插槽呢，使用方法vm.$slots.插槽名字

如果有的插槽没有名字。则使用vm.$slots.default 访问 

打印得到都是数组

得到dom 元素

vm.$slots.插槽名字[索引].elm
vm.$slots.default[索引].elm

代码实例:

在父组件中 我现在在 app.vue中

<template>
  <div id="app">
    <three>
     <!-- 访问插槽 -->
      <h2 slot="header">标题</h2>
      <p>正文内容</p>
      <p>更多内容</p>
      <div slot="footer">底部信息</div>
    </three>
  </div>
</template>
<script>

import three from './components/three'

export default {
  components:{
    three
  },
  data(){
    return{
      msg:'我是父组件里的信息'
    }
  }
}
</script>

子组件three.vue

<template>
    <div class="three">
        <div class="header">
            <slot name="header"></slot>
            <slot></slot>
            <slot name="footer"></slot>
        </div>
    </div>
</template>
<script>
export default {
  mounted(){
      console.log(this.$slots.header[0].elm)
      console.log(this.$slots.default[1].elm)
      console.log(this.$slots.footer[0].elm)
  }
};
</script>