Vue.js 使用父数据渲染子组件

Posted 2023-02-22

【中文标题】Vue.js 使用父数据渲染子组件

【英文标题】：Vue.js render child component with parents data

【发布时间】：2017-02-20 01:53:55

【问题描述】：

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

子组件“预览”具有类似模板的结构，例如 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>

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

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

【问题讨论】：

请将 preview.vue 文件添加到您的问题中。

【参考方案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 对象的一部分一样。

【讨论】：

感谢您的快速答复。我会试一试，稍后在这里提出我的反馈。