Question

我正在研究VueJS 2中的一个简单模态组件。我正在从另一个组件中触发一个事件，该组件将一个对象 myobject 传递给下面显示的那个 myobject字符串.name 和图片;访问并位于 myobject.imagepath 路径的位置未显示。只是要非常清楚;正在呈现<h4>和<img>标记，而不是内容（来自对象）。我猜这是因为在我触发事件之前渲染模态，所以我的问题是，如何让它重新渲染，或者只有在我传递数据后才渲染？

我有一种感觉，这就是贬值的.sync所做的，虽然现在不再存在了 - 反正我也错了。

如果有更好的方法可以做到这一点，那么我全都听见了。

myobject.vue

<template>
    <div id="my-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-3 col-sm-4 col-xs-6">
                                <img id="my-modal-image" class="img-fluid" :src="myobject.imagepath"
                                     alt="Logo"></div>
                            <div class="col-md-9 col-sm-8 col-xs-6">
                                <h4 class="modal-title" v-text="myobject.name"></h4>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                myobject: {}
            }
        },

        created() {
            Event.listen('changed', function (object) {
                this.myobject = object
            });
        }
    }
</script>

这不是父子组件，他们是兄弟姐妹。页面上有许多组件可以触发显示的一个模式。这些组件触发事件并传递一些数据，然后模态组件侦听它。

Answer 1

是否有理由不对您的组件使用Dynamic Props？

你只能使用一个动态道具

<script>
    export default {
        props: ['myobject']
    }
</script>

现在，myobject或其属性中的每项更改都会自动反映在您的模板上

VueJS 2 - 传入数据时更新模态组件

1 个答案: