vue.js - 我想将我的 b-card 元素放在组件的前面

Question

我有一个随 bootstrapvue 框架一起提供的 b-card 组件。但由于某种原因它不会显示。我到底做错了什么？

BlankBody 是一个包含我将用于多个视图的背景的组件。

<template>
<div>
<Header/>
<AppNavigation/>
  <BlankBody>
    <b-card
          title="Card Title"
          img-src="https://picsum.photos/600/300/?image=25"
          img-alt="Image"
          tag="article"
          style="width: 50%; margin-left: 25%;  overflow: visible ;"
          class="mb-1"
  >
      <b-card-text>
          Some quick example text to build on the card title and make up the bulk of the card's content.
      </b-card-text>

      <b-button href="#" variant="primary">Go somewhere</b-button>
    </b-card>
  </BlankBody>
 </div>
</template>

<script>
import AppNavigation from "../components/AppNavigation";
import Header from "../components/Header";
import BlankBody from "../components/BlankBody";

export default {
components: {
Header,
AppNavigation,
  BlankBody
},
};
</script>

这就是我在 main.js 中导入 VueBootstrap 的方式：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import vuetify from './plugins/vuetify';
import BootstrapVue from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import '@babel/polyfill';

Vue.config.productionTip = false;
Vue.use(BootstrapVue)
new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount("#app");

这是我的 BlankBody 组件（我知道我需要编辑这个名称）：

<template>
    <div>
    <v-img :src="require('../assets/background4.png')" width="1920px" height="1080px"></v-img>
    </div>
</template>

<script>
    export default {
        name: "BlankBody"
    }
</script>

<style scoped>
</style>

标签： vue.jsbootstrap-vue

Answer 1

您的<BlankBody>组件不会呈现通过默认插槽传递给它的任何内容。

将其更改为：

<template>
  <div>
    <v-img :src="require('../assets/background4.png')" width="1920px" height="1080px"></v-img>
    <slot></slot>
  </div>
</template>