3

次の問題:

親の DOM に依存する Vue.js コンポーネントがあります。しかし、小道具が渡された瞬間、それ ( 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、つまりスロットの内容だけです。

4

2 に答える 2

5

を使用して取得できますthis.$slots。親コンポーネントのマウント関数で、コンポーネントthis.$slotsに渡すことができる変数にアクセスして割り当てることができarticle-indexます。

次のコードは、渡されたスロットを出力します。

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

ここでフィドルのサンプル。

于 2017-01-07T15:18:30.050 に答える