重新渲染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>

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