Vue.js 外部vue组件数据监视

在我的应用程序中，我有一个组件，我希望在组件之外有他的属性。 我创建了以下示例：

Vue.component('vue-table', {
  template: '<div><template v-for="row in apiData.content"><span>{{row.name}}</span><button @click="remove(row)">remove</button><br></template></div>',
  data: function() {
    return {
    //this data will be loaded from api 
        apiData: {
        total: 20,
        content: [
            {id: 10, name: 'Test'},
            {id: 12, name: 'John'},
            {id: 13, name: 'David'},
        ],
      },
    };
  },
  methods: {
    remove(row) {
        this.apiData.content.splice(this.apiData.content.indexOf(row), 1);
    },
  },
})


new Vue({
  el: '#app',
  methods: {
  isActive(){
    //how can i check if in vue-table apiData.content > 0?
    //return this.$refs.table.apiData.data.length > 0;
  },
  },
})

Vue.component（'Vue-table'{
模板：“{row.name}}删除
”，
数据：函数（）{
返回{
//此数据将从api加载
apiData：{
总数：20，
内容：[
{id:10，名称：'Test'}，
{id:12，名字：'John'}，
{id:13，名字：'David'}，
],
},
};
},
方法：{
删除（世界其他地区）{
this.apiData.content.splice（this.apiData.content.indexOf（行），1）；
},
},
})
新Vue({
el:“#应用程序”，
方法：{
isActive（）{
//如何检查vue表apiData.content是否大于0？
//返回此值。$refs.table.apiData.data.length>0；
},
},
})

因此，当vue表apiData.content.length的长度大于0时，我想将span的类更改为“active”

---

我如何才能做到这一点？

标准做法是在孩子身上发出一个事件，让家长接收并执行它。您可能想知道是否可以观察数组的长度——当组件实例化时，数组甚至不存在——答案是肯定的

查看

watch

部分。依我看，这太酷了，可能会让人不高兴

Vue.component（'Vue-table'{
模板：“{row.name}}删除
”，
数据：函数（）{
返回{
//此数据将从api加载
apiData:{}，
};
},
方法：{
删除（世界其他地区）{
this.apiData.content.splice（this.apiData.content.indexOf（行），1）；
},
},
观察：{
“apiData.content.length”：函数（is，was）{
此.$emit（‘内容长度’为）；
}
},
创建（）{
此.apiData={
总数：20，
内容：[{
id:10，
名称：“测试”
}, {
id:12，
名字：“约翰”
}, {
id:13，
姓名：“大卫”
}, ],
};
}
})
新Vue({
el:“#应用程序”，
数据：{
isActive:错误
},
方法：{
setActive（contentLength）{
this.isActive=contentLength>0；
}
},
})

#应用程序{
字体系列：“Avenir”、Helvetica、Arial、无衬线字体；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
颜色：#2c3e50；
边缘顶部：60像素；
}
.主动{
字体大小：粗体；
}

用户：