如何使这个Vue.js组件工作？

Question

我有这个组件的默认数据，我想在其他页面上重用其他数据：

CustomCard.vue

<template>
   <div>

      <v-layout >
         <v-flex md4 class="white">

            <div>  
               <slot class="top-img">
                  <img src="../assets/default.jpg" alt="">
               </slot>

               <slot class="description">
                  <p>default description</p>
               </slot>
            </div>

         </v-flex>
      </v-layout>

   </div>
</template>

<script>
    export default {
    }
</script>

Page1.vue

<template>
   <div>

     <custom-card>
     </custom-card>

  </div>
</template>

<script>
    export default {
    }
</script>

问题：

如果要将 Page1.vue 页面上的 CustomCard.vue 组件与其他数据一起使用，我该怎么做：

• src="../assets/image1.jpg"

• "changed description"

Answer 1

您应该在要使用它的组件中导入组件 CustomCard ，然后将其添加到vue对象的components选项中。 在此之后，您就可以在模板中使用它了。

<template>
  <div id="app">
    <custom-card/>
  </div>
</template>

<script>
import CustomCard from './components/CustomCard' . // <-- This

export default {
  components: {
    CustomCard // <--This
  }
}

如果你想使用不同的数据......你可以通过这样的道具传递它们：

<custom-card :data="newData"/>