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

Question

我有三个组件: App.vue (入口点)、slotWrapper.vue (包装组件)、About.vue (页面内容)。

在'App.vue‘内部，我有一个路由器视图设置，它是用'slotWrapper.vue’组件包装的。“slotWrapper”组件有一个<slot>，其中将呈现当前路由。

我的问题是:在About.vue页面(它将被呈现为<slot>，而不是slotWrapper.vue组件)中，我有一个计算值，我需要以某种方式将其传递回'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>

About.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，然后使用支持程序将变量向下传递给slotWrapper.vue。

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

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