Question

简而言之，我想从子组件中获取一个值并检查它在父组件中的含义。我有一个使用计算属性的工作实现和通过v-ref在子组件上的引用，但我想知道我是否正在以正确的方式进行，如果有更好/正确的方法做到这一点。

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

以下是我的代码的简要概述：

组件标记

<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

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

以下是$ 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');
          }
     }
});

child vue：

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

Answer 2

这就是我现在使用它的方式，我不确定这是最好的方法，但我在控制台中没有收到任何console.warn警报。会喜欢任何反馈。非常感谢@ Douglas.Sesar

// child
Vue.component('student-table', {

    parent: vueApp,

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

    watch: {
        selected: function() {
            this.$dispatch('updateSelected', this.selected);
        }
    },

})

// parent
var vueApp = new Vue({

    components: {
        child: studentTable
    },

    data: {
        selected: []
    },

    events: {
        updateSelected: function(selected) {
            this.selected = selected;
        }
    },

})

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

2 个答案: