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

最新推荐文章于 2024-07-11 02:43:57 发布

原创最新推荐文章于 2024-07-11 02:43:57 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

总结不易，转载请说明出处哦!

文章标签：

#vue中访问插槽数据

vue2.0.js 专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍了Vue中插槽的使用方法，包括如何访问具名插槽及默认插槽，并通过具体代码实例展示了如何在父组件与子组件间传递内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

具体解释参考文档

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

访问插槽呢，使用方法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>