javascript - 如何在组件外部访问 v-if 中的子组件数据？

Question

简而言之，我想从子组件中获取一个值并检查它在父组件中的值。我有一个使用计算属性的工作实现以及通过 v-ref 的引用在子组件上，但我想知道我是否以正确的方式执行此操作，以及是否有更好/正确的方法来执行此操作。

具体来说，我有一个带有复选框的组件，该组件中选中的复选框的值保存在组件 data 中在名为 selected 的数组变量中。在组件之外，我想有条件地显示 <div>使用v-if但是我不确定如何正确获取子组件的 selected值(value)。

这是我的代码的简要概述:

组件标记

<student-table
    v-ref:student-table
    :data="students"
    :course="course"
    :columns="columns"
>
</student-table>

组件注册

Vue.component('student-table', {

    /* unrelated code */

    data: function () {
        return {
            selected: []
        }
    },

    /* unrelated code */
})

主vue实例

var vueApp = new Vue({
    /* unrelated code */

    computed: {
        selected: function () {
            return this.$refs.studentTable.selected.length
        }
    },

    /* unrelated code */
})

然后在我的html中我可以引用selected我会得到 StudentTable.selected 的长度从而能够在我的 v-if 中使用它

感谢您的指导或帮助!

编辑

我在控制台中得到了这个:

[Vue warn]: Error when evaluating expression "function () {
    return this.$refs.studentTable.selected.length
}". Turn on debug mode to see stack trace.

Answer 1

有多种方法可以在父/组件之间共享数据，例如父/子之间的双向绑定(bind)以及发送和监听事件。

这是一个使用 $broadcast 和 $dispatch 的事件示例:

父vue:

var parentVue = new Vue({
     ...
     compiled: function(){
          this.$on('receiveDataFromChild', function(){
               //do something with the data from the child
          });
     },
     methods: {
          checkChildForData: function(){
               this.$broadcast('pleaseSendDataToYourMama');
          }
     }
}); 

subview :

var childVue = new Vue({
     ...
     compiled: function(){
          this.$on('pleaseSendDataToYourMama', function(){
               this.$dispatch('receiveDataFromChild',this.someImportantData);
          });
     }
});