如何将<slots>内容（由路由器视图提供）数据传递回声明插槽的组件

Question

我有3个组件：App.vue（入口点）、slotWrapper.vue（包装组件）、About.vue（页面内容）。

在“App.vue”内部，我有路由器视图设置，它用“slotWrapper.vue”组件包装。 “slotWrapper”组件有一个

<slot>

，当前路由将在其中渲染。

我的问题：在 About.vue 页面（将代替 slotWrapper.vue 组件的

<slot>

进行渲染）内，我有一个计算值，我需要以某种方式将其传递回“slotWrapper.vue”组件才能使用。我怎样才能实现这样的目标。

我研究了

ScopedSlots

，但我不知道如何在路由器提供渲染的内容的情况下使用它。

链接到：CodeSanbox

App.Vue

<template>
  <div id="app">
    <slotWrapper>
      <router-view />
    </slotWrapper>
  </div>
</template>

<script>
import slotWrapper from "./components/SlotWrapper.vue";
export default {
  name: "app",
  components: {
    slotWrapper,
  },
};
</script>

SlotWrapper.vue

<template>
  <div class="wrpperClass">
    <slot />
  </div>
</template>

<script>
export default {
  name: "SlotWrapper",
};
</script>

<style scoped>
.wrpperClass {
  width: 50%;
  height: 50%;
  color: black;
  background-color: lightblue;
}
</style>

关于.vue

<template>
  <div id="app">
    <slotWrapper>
      <router-view />
    </slotWrapper>
  </div>
</template>

<script>
import slotWrapper from "./components/SlotWrapper.vue";
export default {
  name: "app",
  components: {
    slotWrapper,
  },
};
</script>

<style>
#app {
  margin: 60px;
}

.link {
  display: inline-block;
  padding: 10px;
}

.router-link-active {
  color: green;
}
</style>

路由器：index.js

import Vue from "vue";
import Router from "vue-router";
import About from "../components/About";

Vue.use(Router);

export default new Router({
  mode: "history",

  routes: [
    { path: "/", redirect: "about" },
    {
      path: "/about",
      component: About
      // props: (route) => ({ name: route.query.name })
    }
  ]
});

Answer 1

对于那些可能面临这个问题的人。我想你可以将

props

传递给

<router-view>

并收听

emits

。由于您可以收听

emits

，我只需从

about.vue

页面发出并在

app.vue

上收听，然后使用 props 将变量传递给

slotWrapper.vue

。

应用程序.vue

<template>
  <div id="app">
    <slotWrapper :propToPass="propToPass">
      <router-view @comp-data="receiveFunction" />
    </slotWrapper>
  </div>
</template>

<script>
import slotWrapper from "./components/SlotWrapper.vue";
export default {
  name: "app",
  data() {
    return { propToPass: null };
  },
  components: {
    slotWrapper,
  },
  methods: {
    receiveFunction(data) {
      this.propToPass = data;
      console.log("From emit: ", data);
    },
  },
};
</script>

关于.vue

<template>
  <div>
    <h3>About Page</h3>
    <p>
      I need this data:
      <span style="color: green">'ComputedData'</span> available inside
      'SlotWrapper'
    </p>
    <p>{{ ComputedData }}</p>
  </div>
</template>

<script>
export default {
  name: "About",
  data() {
    return {
      someVariable: "'someVariable'",
    };
  },
  mounted() {
    setTimeout(this.sendData, 2000);
  },
  computed: {
    ComputedData() {
      return (
        this.someVariable + " How do I become accessible inside slotWrapper?"
      );
    },
  },
  methods: {
    sendData() {
      this.$emit("comp-data", this.ComputedData);
    },
  },
};
</script>

Answer 2

由于使用 Vue 对我来说在很多事情上都是一个挑战，所以我想把它放在这里，因为我花了几个小时才弄清楚，而且看起来如此简单和合乎逻辑，但为什么它如此没有意义很难弄清楚：

在应用程序中，如果您想在来自应用程序中的路由器视图的插槽中使用发射，这为我解决了这个问题：

  <LayoutWrapper v-slot:default="{ toggleDrawer }">
<router-view @toggleDrawer="toggleDrawer" :key="$route.fullPath" />