Vue.JS Передача объекта потомку для использования внутри слота

Question

Я пытаюсь передать объект, загруженный в DataContainer, в слот, чтобы пользователь мог настроить представление.

<data-container silo-id="5">
  <div slot="content"> <!-- I tried  :data="siloData" here but no luck -->
    Your current balance is {{data.balance}}
  </div> 
</data-container>

Таким образом, DataContainer загружает ресурс через http и устанавливает значение для его свойства 'siloData'.

Шаблон DataContainer не имеет собственного содержимого, только заполнитель для слота.

<template>
  <div>
    <slot name="content"></slot>
  </div>
</template>

Когда я пытаюсь это сделать, текст не интерполируется и просто остается как {{siloData.balance}} для браузера.

Я пробовал некоторые примеры с сайта Vue.JS, такие как список задач, но я должен признать, что совершенно запутался, возможно, потому что это не коллекция, а всего лишь один (хотя и сложный) объект.

Надеюсь, кто-то может указать мне правильное направление.

Большое спасибо Фил

Answer 1

Вы можете использовать $emit событие

Vue.component('data-container', {
  template: '#data-container',
  data() {
    return {
      siloData: {}
    }
  },
  mounted() {
    this.siloData = { name: "Silo", balance: 10 } // loading data
    this.$emit('silo-loaded', this.siloData)
  }
})

new Vue({
  el: '#app',
  data() {
    return {
      data: {}
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="app">
  <data-container class="card" @silo-loaded="val => data = val">
    <div slot="content">
      Your current balance is {{ data.balance }}
    </div>
  </data-container>
</div>

<template id="data-container">
  <div>
    <slot name="content"></slot>
  </div>
</template>