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

以下问题：

我有一个Vue.js组件，它依赖于其父级的DOM。但是当道具通过时，它（

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>

导出默认值{
道具：[“内容”]，
方法：{
标题（内容）{
//使用DOM元素
//目前，`content`尚未定义
},
},
};

使用上述组件的组件包括以下代码：

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

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

我怎样才能解决这个问题

编辑：

---

这是父组件的模板。我唯一真正需要的是

.article

div或插槽的内容。

您可以使用

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)
    })
  }
})

Vue.component（'wrapper'{
名称：'包装器'，
模板：``，
挂载（）{
这是.slots.default.forEach（vnode=>{
console.log（vnode）
})
}
})

---

小提琴样本。

在@saurabh的帮助下，我发现我可以直接进入传递给孩子的插槽

但核心问题仍然存在：该组件当时没有安装

所以我改变了访问已通过插槽的方式

我现在传递的不是父元素，而是父组件中的默认插槽

由于prop是

VNode

对象的数组，因此我不能对它们使用任何DOM方法。但是由于

VNode

的elm属性包含实际的DOM元素，因此我将使用它

问题是：它还没有安装

这就是为什么

v-for

现在指向

标题

数据，而不是删除的方法。 相反，我添加了一个方法，当安装组件时，Vue会自动调用该方法

调用该方法时，插槽已装入，因此我可以访问它们的

elm

属性。在我的例子中，有多个默认插槽，因此

slots

数组有多个项目。为了能够调用特定的

查询选择器all

，我添加了一些功能魔法

编辑：因为直接访问呈现内容上的querySelector更有意义，所以我现在传递的是

$refs

属性，而不是

$slots

。 即使我只需要

$refs.article

，如果我直接传递它，我将得到未定义的。通过将

this.$refs

作为一个整体传递，子组件可以访问项目ref，即使它在装载之前不存在

这是我的新父组件：

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

从“dashify”导入dashify；
导出默认值{
道具：['refs']，
数据：（）=>({
标题：{}，
hash:location.hash，
}),
方法：{
滚动（至）{
this.refs.article.querySelector（`${to}`）.scrollIntoView（）；
},
},
安装的（）{
const elements=Array.from（this.refs.article.querySelectorAll（'h2'）；
elements.forEach（node=>node.id=dashify（node.innerText））；
this.headers=elements.map（节点=>({
名称：node.innerText，
id:node.id，
}));
},
};

为什么要在prop？@saurabh中传递

这个。$el

，因为我需要访问DOM元素才能执行querySelector。您将如何操作？我将尝试在那里传递一个vue变量，您是否也可以添加父DOM的HTML，并指出您想要访问的内容。@saurabh这样做了so@saurabh我看到你编辑了标题。。。嗯，我不知道如何访问插槽DOM，所以我不能使用像querySelector这样的方法，对吗？您可以使用

vnode.elm

访问

vnode

的HTML因为该元素尚未装入。但是，同样，“如果我在标题上加上v-for，它总是会立即尝试访问该方法（或变量）”。@22samuelk请参阅更新，它将slot的内容放入变量中，并在视图中单独打印。

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

<template>
  <md-card>
    <md-card-content>
      <ol>
        <li v-for="item in headings">
          <a @click="scroll(item.id)" :href="hash">
            {{ item.name }}
          </a>
        </li>
      </ol>
    </md-card-content>
  </md-card>
</template>
<script>
  import dashify from 'dashify';

  export default {
    props: ['refs'],
    data: () => ({
      headings: {},
      hash: location.hash,
    }),
    methods: {
      scroll(to) {
        this.refs.article.querySelector(`#${to}`).scrollIntoView();
      },
    },
    mounted() {
      const elements = Array.from(this.refs.article.querySelectorAll('h2'));
      elements.forEach(node => node.id = dashify(node.innerText));

      this.headings = elements.map(node => ({
        name: node.innerText,
        id: node.id,
      }));
    },
  };
</script>