Вью.Изменить содержимое одного слота из другого

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 ( некоторый контекст здесь ), который можно использовать только из 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>