Question

我正在构建一个应用程序，如下所示。让我们看看我正在使用的一个模型..（我在后台使用Laravel 5.3只提供基本视图并提供API。

例如：客户。在example.com/admin/clients我加载两个组件和。主持人是修改当前所选客户端的表单。导航器用于导航和选择您希望操作的客户端。

这些都作为全局组件加载到根Vue中，＃admin-app。

在Vue.js 1.0中，我让根实例加载了两个组件：selected-client.sync =“selectedClient”，它绑定到根数据变量“selectedClient”，这些组件接受“selectedClient”作为道具和当导航器选择一个新客户端时，导航器将更新selectedClient，并且由于它是通过引用传递的，这将更新根实例，从而更新同步的主持人，然后表单将填充该客户端的详细信息。

当表单被取消/保存时，我会从组件$ parent广播一个事件，这样兄弟就可以在'events'中对它进行操作......

我正在尝试在Vue.js 2.0中复制此功能，但一直无法使用。

我已经阅读了有关从1.0更新到2.0的文档，但他们警告我一直在使用的道具突变，我一直无法弄清楚他们如何设置$ emit和$ on函数使用eventHub，如前所述。

我不介意使用那个eventHub示例，但需要更多关于如何实现它的方向......

我可以在兄弟组件中使用$ on吗？
我是否需要在每个根实例中单独定义它？
我应该为每个正在处理的模型使用不同的根实例吗？
是否有适合此的vue扩展/插件？
我是否正确地接近这个？

感谢您的阅读。下面的代码段

我的app.js

Vue.component(
    'admin-clients-moderator',
    require('./components/admin/clients/Moderator.vue')
);

Vue.component(
    'admin-clients-navigator',
    require('./components/admin/clients/Navigator.vue')
);

var mainApp = new Vue({
    el: '#app',
    data: {
        selectedClient: {}, // I don't think i need this anymore
    }
});

**我的Navigator.vue（简化）

.... Template ....
        <tr v-for="client in collection">
            <td>{{ client.name }}</td>
            <td>{{ client.status }}</td>
            <td>
                <button class="btn btn-primary btn-xs"
                        @click="select(client)"
                >
                    <i class="fa-search fa"></i>
                </button>

                <button class="btn btn-danger btn-xs"
                        @click="remove(client)"
                >
                    <i class="fa-trash fa"></i>
                </button>
            </td>
        </tr>

.... Javascript ....

<script>
export default {
    props: [],
    data() {
        return {
            selectedClient: {},
            collection: [],
            // TRAIT
            resource: null,
            resourceUri: "",
            modelName: ""
        };
    },
    methods: {
        select(client) {
            this.$emit('client-selected', {client});
            this.selectedClient = client;
        },
        remove(client) {
            this.deleteModel(client)
        },

Moderator.vue

.... JaveScript


<script>
export default {
    props: [],
    data() {
        return {
            selectedClient: {},
            // TRAIT
            resource: null,
            resourceUri: "",
            modelName: ""
        };
    },
    computed: {
        newClient() {
            return (this.selectedClient.id == null
            || this.selectedClient.id == 0);
        }
    },
    created() {
        this.$on('client-selected', this.setSelectedClient);
    },
    methods: {
        setSelectedClient(client) {
            this.selectedClient = client;
        },

Answer 1

我可以在兄弟组件中使用$ on吗？

是。您可以在父级和兄弟级组件中使用$on和$emit

我是否需要在每个根实例中单独定义它？

您可以添加全局变量。但我通常这样做 this.$root.$emit(my-event)

我是否应该为每个模型使用不同的根实例？

见＃2

是否有适合此的vue扩展/插件？

取决于您正在构建的应用程序，您可能需要检查Vuex

我是否正确地接近这个？

到目前为止看起来合法。

Answer 2

每个Vue实例（root，children，siblings）都是一个独立的事件中心。

你$在一个实例上发出事件，你可以在同一个实例上订阅$ on的事件通知。

您可以使用this.$root.$on()和this.$root.$emit()将根实例用作事件总线并实现您的目的。

您可以使用任何实例作为事件总线：$ root非常方便，因为可以使用此。$ root从任何组件访问它。诀窍是所有$ emit（）和$ on（）都应该应用于同一个vue实例。

VueJS 2.0 - 兄弟组件之间的通信 - $ emit和$

2 个答案: