时间戳

首页 > 解决方案 > 将组件导入Vue，然后传递数据

javascript - 将组件导入Vue，然后传递数据

问题描述

我的 Nuxt 项目中有一个组件。

组件/Boxes.vue：

<template>
  <b-container>
    <b-row>
        <b-col v-for="box in boxes" v-bind:key="box">
          <b-card 
          :title="box.title"
          class="text-center mt-5">
            <p class="card-text">
              {{ box.text }}
            </p>
            <b-button
            variant="danger"
            >Find out more</b-button>
          </b-card>
        </b-col>
    </b-row>
  </b-container>
</template>

<script>
export default {
  name: "Boxes",
  data() {
    return {
    }
  }
}
</script>

然后我想把它导入 pages/index.vue

<template>
<div id="home">
  <b-container>
    <b-carousel 
      id="carousel1"
      class="mt-2"
      style="text-shadow: 1px 1px 2px #333;"
      controls
      indicators
      background="#ababab"
      :interval="4000"
      img-width="1024"
      img-height="480"
      v-model="slide"
      @sliding-start="onSlideStart"
      @sliding-end="onSlideEnd"
    >
      <b-carousel-slide img-src="./slides/slide1.jpg"></b-carousel-slide>
      <b-carousel-slide img-src="./slides/slide2.jpg"></b-carousel-slide>
      <b-carousel-slide img-src="./slides/slide3.jpg"></b-carousel-slide>
      <b-carousel-slide img-src="./slides/slide4.jpg"></b-carousel-slide>
    </b-carousel>
  </b-container>
  <Boxes/>
</div>
</template>

<script>
import Boxes from '@/components/Boxes.vue';

export default {
  components: {
    Boxes
  },
  data () {
    return {
      slide: 0,
      sliding: null,
      boxes: [
        {
          title: 'Fire Stopping',
          text: 'How does it work?'
        },
        {
          title: 'Our Services',
          text: 'Full range of firestopping'
        },
        {
          title: 'Bid Request',
          text: 'Inexpensive peace of mind'
        },
      ]
    }
  },
  methods: {
    onSlideStart (slide) {
      this.sliding = true
    },
    onSlideEnd (slide) {
      this.sliding = false
    }
  }
}
</script>

当我尝试将它加载到 index.vue 文件时，就好像我没有导入它一样。

您会看到它在这里运行，因此您可以更好地理解：https ://codesandbox.io/s/github/perfectimprints/precisionfirestopping.com 。

Vue 抱怨组件没有定义，但是在渲染时注册了。

标签： javascriptvue.jsvuejs2vue-componentnuxt.js

解决方案

您缺少将boxes道具传递给您的组件：

    <Boxes :boxes="boxes" />

在组件内部，您应该添加props:['boxes']如下：

   <script>
      export default {
        name: "Boxes",
        props:['boxes'],
        data() {}
       }
    </script>

检查此代码

您可以在这些doc1和doc2中了解props以及如何将数据从父组件传递到子组件

推荐阅读