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”＆＃39;属性。

DataContainer的模板没有自己的内容，只是插槽的占位符。

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

当我尝试这个时，文本没有插入，只是作为{{siloData.balance}}保留在浏览器中。

我已经尝试过Vue.JS网站上的一些例子，比如todo列表，但我必须承认完全混淆，可能因为这不是一个集合，而只是一个（虽然很复杂）对象。

希望有人能指出我正确的方向。

非常感谢菲尔

Answer 1

您可以使用$emit活动

＆＃13;

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: {}
    }
  }
})

＆＃13;

<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>

＆＃13;

Vue.JS将对象传递给子，以便在插槽内使用

1 个答案: