Javascript Vue.js使用父级数据呈现子组件

我在Vue.js中有一个父组件，如下所示：

<template>
<ul class="list-group">
    <li class="list-group-item" v-for="item in items">
        <div class="row">
            <div class="col-md-6">
                {{ item.title }}
            </div>
            <div class="col-md-6 text-right">
                <a href="#" class="btn btn-primary btn-sm">
                    <span class="glyphicon glyphicon-pencil"></span>
                </a>
                <a href="#" class="btn btn-success btn-sm">
                    <span class="glyphicon glyphicon-link"></span>
                </a>
                <a href="#" class="btn btn-danger btn-sm">
                    <span class="glyphicon glyphicon-remove"></span>
                </a>
            </div>

            <div class="col-md-12">
                <preview></preview>
            </div>
        </div>
    </li>
</ul>
</template>

export default {
    ...
    props: ['item']
}

这是Preview.vue内容，与Item.vue内容类似。 作为一个小小的解释：

---

模板数据作为预定义的html内容来自数据库，包括

{{item.title}

和一些其他占位符。我希望使用来自该项的特定内容来呈现此内容。

在Vue.js中，组件无法直接从其父级访问数据。如果希望

预览

能够呈现

{{{item.title}}

，则必须将

项

作为。因此，在

preview.vue

中，声明如下：

<template>
<ul class="list-group">
    <li class="list-group-item" v-for="item in items">
        <div class="row">
            <div class="col-md-6">
                {{ item.title }}
            </div>
            <div class="col-md-6 text-right">
                <a href="#" class="btn btn-primary btn-sm">
                    <span class="glyphicon glyphicon-pencil"></span>
                </a>
                <a href="#" class="btn btn-success btn-sm">
                    <span class="glyphicon glyphicon-link"></span>
                </a>
                <a href="#" class="btn btn-danger btn-sm">
                    <span class="glyphicon glyphicon-remove"></span>
                </a>
            </div>

            <div class="col-md-12">
                <preview></preview>
            </div>
        </div>
    </li>
</ul>
</template>

export default {
    ...
    props: ['item']
}

然后，在父组件的模板中，您可以将

item

从父组件的

items

数组中的某个属性绑定到

items

：

<li class="list-group-item" v-for="item in items">
    ...
    <preview v-bind:item="item"></preview>
    ...
</li>

...
...

---

现在，您的

预览

组件有一个

项

，它可以在其模板中呈现，就像它是

数据

对象的一部分一样。

请将preview.vue文件添加到您的问题中。感谢您的快速回答。我将尝试一下，稍后将我的反馈放在这里。