如何访问另一个子组件中插槽的内容

Question

以下问题：

我有一个依赖于其父级 DOM 的 Vue.js 组件。但是在 prop 被传递的那一刻，它 ( this.$el) 是未定义的，可能是因为它当时还没有安装。

我的组件的 vue 模板文件如下所示：

<template>
  <md-card>
    <md-card-content>
      <ol>
        <li v-for="item in headings(content)">
          <a :href="`#${item.id}`">{{ item.name }}</a>
        </li>
      </ol>
    </md-card-content>
  </md-card>
</template>
<script>
  export default {
    props: ['content'],
    methods: {
      headings(content) {
        // DOM element is used
        // At this moment, `content` is undefined
      },
    },
  };
</script>

使用上述组件的组件包括这段代码：

<article-index :content="this.$el"></article-index>

我想过等待父组件被挂载，但这样我似乎无法像上面那样保留模板，因为它总是会尝试立即访问方法（或变量）。

我该如何解决这个问题？

编辑：

<template>
  <div class="content">
    <div class="left"><article-index :content="this.$el"></article-index></div>
    <div class="article"><slot></slot></div>
    <div class="right"><slot name="aside"></slot></div>
  </div>
</template>

这是父组件的模板。我唯一真正需要的是.articlediv 或插槽的内容。

Answer 1

您可以使用它来获取它this.$slots，在父组件的 mount 函数中，您可以访问this.$slots它并将其分配给一些可以传递给article-index组件的变量。

以下代码打印传递的插槽：

Vue.component('wrapper', {
    name: 'Wrapper',
  template: `<div><slot></slot></div>`,
  mounted () {
    this.$slots.default.forEach(vnode => { 
        console.log(vnode)
    })
  }
})

示例小提琴在这里。