Question

我有一个带有某些插槽的组件。

    <v-split-container ref="splitContainer" class="panel-panel">
        <template slot="left">
           Test
        </template>
        <template slot="right">
            <router-view></router-view> //Show Compontent A
        </template>
        <template slot="bottom"> //Slot B
            Hello
        </template>
    </v-split-container>

我可以通过在组件A中调用一个函数来更改插槽B的内容吗？

Answer 1

您好，您可以使用Scoped Slot进行操作。我为您创建了一个示例。请不要因为我使用的v-slots（Some context here）仅可用于vue v2.6。

请看一下代码示例：https://codesandbox.io/s/2030jo20j0?fontsize=14

子组件

<template>
  <div>
    <div>
      <slot name="msgSlot">{{msg}}</slot>
    </div>
    <br>
    <slot name="bottom" :updateMsg="updateMsg"></slot>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    msg: "Default Message"
  }),
  methods: {
    updateMsg(text) {
      this.msg = text;
    }
  }
};
</script>

父组件

<template>
  <div id="app">
    <HelloWorld>
      <template v-slot:msgSlot></template>
      <template v-slot:bottom="{updateMsg}">
        <input type="text" v-model="msg">
        <button @click="updateMsg(msg)">Change Msg</button>
      </template>
    </HelloWorld>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  data: () => ({
    msg: ""
  }),
  components: {
    HelloWorld
  }
};
</script>

Vue。从一个插槽更改另一个插槽的内容

1 个答案: