Question

我有这样的结构：

public Bitmap getMapImage(double latitude, double longitude) {

    Bitmap bmp = null;
    InputStream inputStream = null;
    try {
        java.net.URL mapUrl = new URL("http://maps.google.com/maps/api/staticmap?center="+latitude+","+longitude+"&zoom=15&size=200x200&sensor=false");

        HttpURLConnection httpURLConnection = (HttpURLConnection) mapUrl.openConnection();

        inputStream = new BufferedInputStream(httpURLConnection.getInputStream());

        bmp = BitmapFactory.decodeStream(inputStream);

        inputStream.close();
        httpURLConnection.disconnect();

    } catch (IllegalStateException e) {
        Log.e("tag", e.toString());
    } catch (IOException e) {
        Log.e("tag", e.toString());
    }

    return bmp;
}

在<childs> <child> <ul> <li v-for="item in currentData">@{{ item.name }}</li> </ul> </child> </childs>组件中，我有一个数据属性child。

currentData

由于某些原因，我从// Child.vue data: { currentData: {} }组件（而不是currentData）为此childs道具分配了价值。

child

如何将此// Childs.vue child.currentData = data;提供给currentData的分页元素：

<child>

Child.vue的模板是这样的：

<ul>
    <li v-for="item in currentData">@{{ item.name }}</li>
</ul>

我试过这样的事情：

<template> <div><slot></slot></div> </template>

Answer 1

我相信你需要的是Scoped Slots。

为此你应该明确地传递（在模板的插槽声明中）你想要提供给<slot>“用户”的道具。

E.g。假设您要为foo的广告位用户提供<child>属性（假设childData中的<child>属性existi。你会这样做：

<!-- This is <child>'s template -->
<template> <div><slot :foo="childData"></slot></div> </template>

从那时起，使用该<child>组件的任何人都可以通过声明foo来访问该slot-scope媒体资源：

<child>
  <ul slot-scope="slotProps">
    <li>{{ slotProps.foo }}</li>
  </ul>
</child>

请注意，slot-scope是在<slot>所在地的元素中声明的。

完整演示：

Vue.component('children', {
  template: '#children'
})

Vue.component('child', {
  template: '#child',
  data() {
    return {
      childData: "I am childData"
    }
  }
})

new Vue({
  el: '#app'
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <children>
    <child>
      <ul slot-scope="slotProps">
        <li>{{ slotProps.foo }}</li>
        <!-- <li v-for="item in currentData">@{{ item.name }}</li> -->
      </ul>
    </child>
  </children>
</div>

<template id="children">
  <div><slot></slot></div>
</template>
<template id="child">
  <div><slot :foo="childData"></slot></div>
</template>

如果我想在<ul>元素之外添加其他元素，该怎么办？ Vue只会丢弃slot-scope以外的任何内容。

这不是slot-scope所致，而是<slot>一般。

由于child只有一个<slot>，因此您在<child>中放置的第一个元素就是slot。

如果你想要多个元素取slot，你必须包装它们。例如。在<div>中。但是，如果您不希望渲染此包装元素，请使用<template>。见下面的演示。

Vue.component('children', {
  template: '#children'
})

Vue.component('child', {
  template: '#child',
  data() {
    return {
      childData: "I am childData"
    }
  }
})

new Vue({
  el: '#app'
})

.child { border: 1px solid red }

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <children>
    <child>
      <template slot-scope="slotProps">
        <ul>
          <li>{{ slotProps.foo }}</li>
          <!-- <li v-for="item in currentData">@{{ item.name }}</li> -->
        </ul>
        <span>howdy</span>
      </template>
    </child>
  </children>
</div>

<template id="children">
  <div><slot></slot></div>
</template>
<template id="child">
  <div class="child"><slot :foo="childData"></slot></div>
</template>

如何为其开槽元件提供组件支柱？

1 个答案: