Vue jsで親からの子コンポーネントのレイアウトを定義する

Question

私はVueを初めて使用し、Vue 2.2.1を使用しています。私はそれが親によって定義されたレイアウトを持つことができる再利用可能なコンポーネントを作成することが可能かどうか疑問に思っています。

// Parent template 
<template> 
    <ul> 
    <li v-for="item in items"> 
     <item-component :id="item.id"> 
     <h1><item-title /></h1> 
     <p> 
      <item-description /> 
     </p> 
     </item-component> 
    </li> 
    </ul> 
</template> 


// Child definition 
<script> 
export default { 
    data() { 
    return { 
     title: '', 
     description: '' 
    } 
    } 
    create() { 
    // do some async fetch 
    fetch(this.id) 
     .then((result) { 
     this.$data.title = result.title 
     this.$data.description = result.description 
     }) 
    } 
} 
</script> 

ので、ユースケースは、子コンポーネントは、IDによるデータのフェッチのために責任があるが、親がデータをレイアウトする責任があるということです。たとえば、以下の擬似コードを考えてみましょう。こうすることで、フェッチロジックを1か所に保つことができますが、さまざまな場所でデータを再フォーマットすることができます。

これが可能かどうかはわかりません。私は子供のフェッチ機能をmixinに取り出すことができると思いますが、レイアウトのバリエーションごとに新しいコンポーネントを作成する必要があります。 Vueでこれを処理するための推奨される方法は何ですか？

Answer 1

一般に、親にコンテンツを子どもに含める場合、それを行う手段はslotです。内部では、典型的なスロットですが、スコープは親スコープです。つまり、スコープは子の内部のデータにアクセスできません。

あなたの場合、scoped slotを使用します。これは、子供が親にいくつかの情報を渡して使用することができる場所です。

// Parent template 
<template> 
    <ul> 
    <li v-for="item in items"> 
     <item-component :id="item.id"> 
     <template scope="props"> 
      <h1>{{props.title}}</h1> 
      <p> 
       {{props.description}} 
      </p> 
     </template> 
     </item-component> 
    </li> 
    </ul> 
</template> 


// Child definition 
<script> 
export default { 
    template:"<div><slot :title='title' :description='description'></slot></div>", 
    data() { 
    return { 
     title: '', 
     description: '' 
    } 
    } 
    create() { 
    // do some async fetch 
    fetch(this.id) 
     .then((result) { 
     this.$data.title = result.title 
     this.$data.description = result.description 
     }) 
    } 
} 
</script>