vue组件数据看外面

Question

在我的应用程序中，我有一个组件，我想在组件外部使用他的属性。我创建了这个例子：

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;
  },
  },
})

http://jsfiddle.net/z11fe07p/2806/

所以我想在 vue-table apiData.content.length > 0

的长度时将 span 的 class 更改为 'active'

我该怎么做？

Answer 1

标准做法是在子级中发出一个事件，让父级接收事件并对其采取行动。您可能想知道是否可以观察数组的长度——当组件被实例化时数组的长度甚至不存在——答案是可以的。

查看 watch 部分。 IMO，这太酷了，可能不受欢迎。

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: {},
    };
  },
  methods: {
    remove(row) {
      this.apiData.content.splice(this.apiData.content.indexOf(row), 1);
    },
  },
  watch: {
    'apiData.content.length': function(is, was) {
      this.$emit('content-length', is);
    }
  },
  created() {
    this.apiData = {
      total: 20,
      content: [{
        id: 10,
        name: 'Test'
      }, {
        id: 12,
        name: 'John'
      }, {
        id: 13,
        name: 'David'
      }, ],
    };
  }
})


new Vue({
  el: '#app',
  data: {
    isActive: false
  },
  methods: {
    setActive(contentLength) {
      this.isActive = contentLength > 0;
    }
  },
})

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.active {
  font-weight: bold;
}

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <p>
    <span :class="{active: isActive}">Users:</span>
  </p>
  <vue-table refs="table" @content-length="setActive"></vue-table>
</div>

vue组件数据看外面

vue component data watch outside

vue.js

vue-component

watch