重新渲染 Vue.js 组件

Question

有没有办法重新渲染 Vue.js 组件？我有一个下拉列表和一个表单。两者都是独立的组件，一个位于页眉，另一个位于页面中间某处。

两者都是独立的组件，我无法将一个组件作为另一个组件的子组件。

那么是否可以在 Vuejs 中触发下拉菜单的重新渲染？

Answer 1

如果我们假设列表组件的项目列表是通过 prop 发送到组件的，那么更新主应用程序的列表是相当简单的，这将更新列表组件。

它如何工作的快速示例：

<div id="app"> <!-- The app -->
    <list :projects="projectsList"></list> <!-- list component -->
    <add-project></add-project> <!-- project add component -->
</div>

<template id='project-list-template'> <!-- template to list projects -->
    <div v-for="proj in projects">{{proj}}</div>
</template>
<template id="add-project-template"> <!-- template to add project -->
    <input v-model='projectData.name'/><button v-on:click="saveProject()">Save</button>
</template>

<script>

    // Init components
    var ProjectListComponent = Vue.extend({
        props: ['projects'],
        template: '#project-list-template'
    });
    var AddProjectComponent = Vue.extend({
        template: '#add-project-template',
        data: function() {
            return {
                projectData: {
                    name:'test'
                }
            }
        },
        methods: {
            saveProject:function() {
                this.$root.appendProjectToList(this.projectData); // Target the app's function
            }
        }
    });

    // Register components
    Vue.component('list', ProjectListComponent);
    Vue.component('add-project', AddProjectComponent);

    // Do app stuff
    new Vue({
        el: '#app',
        data: {
            projectsList: ['ProjectX','ProjectY']
        },
        methods: {
            appendProjectToList: function(project) {
                this.projectsList.push(project.name);
            }
        }
    });
</script>

如果不是这种情况，您应该真的添加一个简化的代码示例。

重新渲染 Vue.js 组件

Re-render a Vue.js component

vue.js