將數據傳遞到模態組件上vueJS

Question

將標題{{post.name}}和圖像post.imgAttribution從tile-component傳遞到模態組件的最佳方式是什麼，以便在按下按鈕時兩個元素都顯示相同的數據？

<div id="root" class= "container"> 
    <hero-component></hero-component> 
    <div class="tile is-ancestor"> 
     <tile-component v-for="post in posts" :key="post.id"> 
      <template slot="header-title">{{post.name}}</template> 
      <template slot="content-photo"><img :src= "post.imgAttribution"/> </template> 
      <template slot="button-modal"> 
       <modal-component v-show="showModal" @close="showModal = false"></modal-component> 
       <a class="button is-primary" v-on:click="showModal=true">Show Cat</a> 
      </template> 
     </tile-component> 
    </div> 
</div> 

組件：

var HeroComponent = Vue.component('hero-component', { 
template: ` 
     <div> 
      <section class="hero"> 
         <div class="hero-body"> 
         <div class="container"> 
          <h1 class="title"> 
          Cat Gallery 
          </h1> 
         </div> 
         </div> 
      </section> 
     </div>`}); 

    var TileComponent = Vue.component('tile-component', { 
     template:` 
     <div> 
       <div class="tile is-parent"> 
       <article class="tile is-child box"> 
        <p class="title"> 
        <slot name="header-title"></slot> 
       </p> 
       <p class="content-photo"> 
        <slot name="content-photo"></slot> 
       </p> 
        <slot name="button-modal"></slot> 
      </article> 
      </div> 
     </div> 
    </div>`}); 

    var ModalComponent = Vue.component('modal', { 
    template: ` 
    <div> 
     <div class="modal is-active"> 
      <div class="modal-background"></div> 
       <div class="modal-card"> 
        <header class="modal-card-head"> 
         <p class="modal-card-title"> 
          <!-- title from tile-component -!> 
         </p> 
        <button class="modal-close" @click="$emit('close')" ></button> 
        </header> 
        <section class="modal-card-body"> 
         <div class="modal-content"> 
          <p class="image is-4by3"> 
           <!-- image from tile-component -!></p> 
         </div> 
        </section> 
       </div> 
      </div> 
    </div>`}); 

    Vue.component('modal-component', ModalComponent); 

    new Vue({ 
     el: '#root', 
     data: { 
      showModal: false, 
      posts: [], 
      errors: [] 
     }, 
     component: { 
      'hero-component': HeroComponent, 
      'modal-component': ModalComponent, 
      'tile-component': TileComponent 
     }, 
     created() { 
      axios.get('http://localhost:3000/Cat/') 
      .then(response => this.posts = response.data) 
      .catch(e => this.error.push(e)); 
     } 
    }); 

Answer 1

您已經使用插槽，爲什麼不繼續？

var ModalComponent = Vue.component('modal', { 
    template: ` 
     <div> 
     <div class="modal is-active"> 
      <div class="modal-background"></div> 
      <div class="modal-card"> 
      <header class="modal-card-head"> 
       <p class="modal-card-title"> 
       <slot name="title"></slot> 
       </p> 
       <button class="modal-close" @click="$emit('close')" ></button> 
      </header> 
      <section class="modal-card-body"> 
       <div class="modal-content"> 
       <p class="image is-4by3"> 
        <slot name="image"></slot> 
       </p> 
       </div> 
      </section> 
      </div> 
     </div> 
     </div> 
`}); 

並以這種方式傳遞值。在這裏我使用一個標題和一個img元素，但是你可以做你想做的。

<modal-component v-show="showModal" @close="showModal = false"> 
    <h1 slot="title">{{post.name}}</h1> 
    <img slot="image" :src="post.imgAttribution" alt="" /> 
</modal-component>