vue 将自定义组件作为属性传递给父组件

Question

我还没有看到其他试图回答我在做什么的问题，我不确定是否只是因为我没有在寻找正确的措辞，所以我会解释发生了什么。

我正在尝试开发一个界面，用户可以在其中使用 vue 拖动或输入图像。我还有一个名为Card 的组件，对于类似卡片的对象来说，它有点像 vue 和 bulma。 Card 组件有两个props、title 和content。当您要填写的 title 和 content 属性是预加载的文本或图像数据时，使用起来非常简单。

但是，我想做的是在 Card 内放置另一个 vue 组件（vue-picture-input 上的 PictureInput 组件 npm）。我试图通过将它作为content 属性传递来做到这一点。我已经阅读了 reactive props 和 dynamic components 上的 vue 文档，但都没有真正谈论这个用例。

代码：

Card.vue：

    <template>
      <div class="card is-size-7-mobile is-fluid">
        <div class="card-header">
          <a class="card-header-title">
            <span class="is-info">{{this.title}}</span>
          </a>
          <span v-if="this.isExpanable">
            <a class="card-header-icon card-toggle">
              <span class="icon" @click="arrowClick">
                <span v-if="!this.open">
                  <font-awesome-icon :icon="['fas', 'angle-down']"></font-awesome-icon>
                </span>
                <span v-else>
                  <font-awesome-icon :icon="['fas', 'angle-up']"></font-awesome-icon>
                </span>
              </span>
            </a>
          </span>
        </div>
          <slide-up-down :active="this.open" :duration="400" v-if="this.isExpanable">
            <div v-if="this.open" class="card-content is-size-7-mobile">
              <div class="content">{{this.content}}</div>
            </div>
          </slide-up-down>
          <div v-else>
            <div class="content">{{this.content}}</div>
          </div>
        </div>
    </template>

    <script>
    export default {
      data() {
        return {
          open: false
        };
      },
      props: {
        title: "",
        content: null,
        isExpanable: false
      },
      methods: {
        arrowClick(event) {
          this.open = !this.open;
        }
      }
    };
    </script>

    <style scoped>
    .card {
      border-radius: 1em;
      background-color: transparent !important;
      border-color: transparent !important;
    }
    .card-header {
      box-shadow: transparent;
    }
    </style>

ImageInput.vue：

    <template>
    <div class="content">
        <Card :title="makeCardTitle()" :content="makeCardContent()"/>
    </div>
    </template>

    <script>
    import PictureInput from 'vue-picture-input';
    import Card from './Card';
    import Vue from 'vue';

    export default {
        name: 'ImageInput',
        components: {
            PictureInput,
            Card
        },
        props: {
            idx:{
                type:Number,
                default: 0
            }
        },
        data() {
            return {
                pictureComponent: "PictureInput"
            }
        },
        methods: {
            makeCardTitle: function(){
                return "page ".concat(String(this.idx))
            },
            makeCardContent: function(){
                var PictureInputClass = Vue.extend(PictureInput);
                var pictureInputInstance = new PictureInputClass();
                return pictureInputInstance
            }
        }
    }
    </script>

    <style scoped>

    </style>

正如您在ImageInput.vue 代码中看到的那样，我尝试动态构造PictureInput 对象并将其作为道具content 传递给Card，但它不起作用，我得到两个错误一个是Card 中的“循环对象值”，另一个是PictureInputClass 对象没有toJSON 方法，我猜vue 框架的某些部分期望这种方法。我也试过做： <Card :title="makeCardTitle()" :content="PictureInput"/>，但我最终得到了关于PictureInput 未定义但在渲染期间被引用的错误。也许我可以将content 更改为名为@9​​87654347@，但我不确定这是否也是我想要的。

我经历这一切的原因是，我真的很欣赏 Vue 的设计方式，允许组件在创建界面时被重用和重新集成。我显然可以从Card 获取（大部分）模板并针对这种情况重新配置它，但我想看看是否有更简单的方法让PictureInput 组件成为Card 的子组件组件。

Answer 1

我会使用插槽将 PictureInput 组件放入 Card 组件中。为了简化示例，我删除了一些 HTML。

Card.vue

<template>
  <div class="card is-size-7-mobile is-fluid">
        <div class="card-header">
            <a class="card-header-title">

                <!-- Don't need to use "this" keyword inside the template,
                it is implied that the context is already "this" -->
                <span class="is-info" @click="isExpanable = !isExpanable">{{title}}</span>
            </a>
        </div>
        <div v-if='isExpanable'>
            <slot/> <!-- Slot where the <PictureInput/> will be inserted -->
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanable: false, // internal state to manage the open/close toggle
    }
  },
  props: {
    title: String, // Define the data type
  }
};
</script>

<style scoped>
.card {
  border-radius: 1em;
  background-color: transparent !important;
  border-color: transparent !important;
}
.card-header {
  box-shadow: transparent;
}
</style>

ImageInput.vue

<template>
<div class="content">
    <Card :title="makeCardTitle">
        <PictureInput/>
    </Card>
</div>
</template>

<script>
import PictureInput from 'vue-picture-input';
import Card from './Card';

export default {
    name: 'ImageInput',
    components: {
        PictureInput,
        Card
    },
    props: {
        idx:{
            type:Number,
            default: 0
        }
    },
    computed: {
        // Should be a computed property since we are creating data from internal data "idx"
        makeCardTitle: function(){
            return "page ".concat(String(this.idx));
        }
    }
}
</script>

希望这会引导您朝着正确的方向前进。此外，您不必使用 Vue.extend(PictureInput) 进行实例化。通常，您只需将其添加到 components 选项键中即可。