问题如下：
我有一个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>
使用以上代码的组件包括以下代码：
<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或广告位的内容。
您可以使用来获取它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)
})
}
})
样品在这里摆弄。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句