相关疑难解决方法(0)

在vuejs 2.0 model.sync中将被弃用.

那么,在vuejs 2.0中兄弟组件之间进行通信的正确方法是什么？

我在Vue 2.0中发现的想法是通过使用商店或事件总线进行兄弟姐妹的沟通.

据埃文说:

值得一提的是"在组件之间传递数据"通常是一个坏主意,因为最终数据流变得无法跟踪并且很难调试.

如果一个数据需要由多个组件共享,则更喜欢 全局存储或Vuex.

[ 链接到讨论 ]

和:

.once并且.sync已弃用.道具现在总是单向下降.要在父作用域中产生副作用,组件需要显式地emit显示事件而不是依赖于隐式绑定.

(所以,他建议使用$emit和$on)

我很担心因为:

• 每个store并event具有全球知名度(纠正我,如果我错了);
• 为每个次要的沟通创建一个新的商店是很重要的;

我想要的是以某种方式或兄弟姐妹组件的可见性范围.或者也许我没有抓住这个想法.eventsstores

那么,如何以正确的方式沟通？

我有在父组件中生成的事件,而子组件必须对其做出反应.我知道这不是推荐的方法vuejs2,我必须做一个$root非常糟糕的发射.所以我的代码是这样的.

<template>
    <search></search>
    <table class="table table-condensed table-hover table-striped" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
        <tbody id="trans-table">
            <tr v-for="transaction in transactions" v-model="transactions">
                <td v-for="item in transaction" v-html="item"></td>
            </tr>
        </tbody>
    </table>
</template>

<script>
    import Search from './Search.vue';

    export default {
        components: {
            Search
        },
        data() {
            return { 
                transactions: [], 
                currentPosition: 0 
            }
        },
        methods: {
            loadMore() {
                this.$root.$emit('loadMore', {
                    currentPosition: this.currentPosition
                });
            }
        }
    }
</script>

正如您所看到的那样loadMore,在无限滚动时触发,并且正在将事件发送到子组件搜索.不仅仅是搜索,而是因为它是根,它正在向所有人广播.

什么是更好的方法.我知道我应该使用道具,但我不知道在这种情况下我怎么能这样做.

我有一个与道具同名的观察者。该 prop 在某些事件的父组件中动态设置。我需要每次在父组件上触发事件时触发子组件中具有属性值的某些函数 - 即使它设置的 prop 是相同的。是否有任何观察者选项或其他处理此类情况的方法可以让我做到这一点？

我尝试过的（这是在Post组件中）：

watch: {
    replyClicked:
    {
        handler(newVal, oldVal)
        {
            console.log(newVal, oldVal);
        },
        immediate:true
    }
},

当 newVal 与 oldVal 不同时唯一console.log打印，即使它们相同，我也需要一些函数来触发。父组件如下所示：

<RenderPost @onReply="onReply" />
<Post :replyClicked="replyClicked" />

这些是父数据和方法：

data()
{
    return {
        replyClicked : null
    }
},
methods :
{
    onReply(id)
    {
        this.replyClicked = id;
    }
}