Question

我在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>

剧本：

<script>

import Preview from './Preview.vue';

export default {

    data() {
        return {
            items: '',
            template: []
        }
    },

    created() {
        this.fetchItems();
        this.$on('preview-build', function (child) {
            console.log('new preview: ')
            console.log(child)
        })
    },

    components: {
        Preview
    },

    methods: {

        fetchItems: function () {
            var resource = this.$resource('api/preview');

            resource.get({}).then((response) => {
                this.items = response.body.item;
            }, (response) => {
                console.log('Error fetching tasks');
            }).bind(this);
        },

    }

 }
 </script>

子组件＆＃34;预览＆＃34;具有类似模板的结构，例如{{ item.title }}。预览加载正确但未呈现。

我真的不知道Vue 2.0是否可行，但希望有人遇到同样的问题，可以帮助我。

编辑（感谢帕特里克）：

<template>
   <textarea rows="20" class="form-control">
     {{ template.content }}
   </textarea>
</template>

<script>
    export default {

        data() {
            return {
                template: [],
            }
        },

        created() {
            this.fetchTemplate();
        },

        methods: {

            fetchTemplate: function () {
                var resource = this.$resource('api/preview');

                resource.get({}).then((response) => {
                    this.template = response.body.template;
                }, (response) => {
                    console.log('Error fetching template');
                }).bind(this);
            },

        }

    }
</script>

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

模板数据来自数据库，作为预定义的html内容，包括{{ item.title }}和其他一些占位符。我希望使用来自该项目的特定内容来呈现它。

Answer 1

在Vue.js中，组件无法直接访问其父级的数据。如果您希望preview能够呈现{{ item.title }}，则必须将item作为prop传递给它。所以在preview.vue中，声明如下：

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

然后，在您的父组件模板中，v-bind item支持来自父级items数组的内容：

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

现在，您的preview组件有item，可以在其模板中呈现，就像它是data对象的一部分一样。

Vue.js使父母数据与儿童竞争

1 个答案: