Vue组件外部监听属性：apiData.content长度>0时切换span类为active

嗨，我来帮你搞定这个需求～下面给你两种可行的实现方案，你可以根据自己的场景选择：

这种方法适合快速实现，直接通过ref获取子组件实例，监听其属性变化：

1. 先给vue-table组件添加ref标识，方便父组件获取它的实例：

<vue-table ref="myTable" :api-data="apiData"></vue-table>

2. 在父组件的data里定义一个控制类名的变量，比如isActive，初始为false；然后通过watch监听子组件的apiData.content.length，当长度大于0时更新isActive：

<template>
  <div>
    <!-- 根据isActive的值切换类名 -->
    <span :class="{ active: isActive }">需要切换类的元素</span>
    <vue-table ref="myTable" :api-data="apiData"></vue-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      apiData: { content: [] },
      isActive: false
    }
  },
  watch: {
    // 监听子组件apiData.content的长度变化
    '$refs.myTable.apiData.content.length'(newLength) {
      this.isActive = newLength > 0;
    }
  },
  // 页面初始化时，如果apiData已有内容，记得同步状态
  mounted() {
    const table = this.$refs.myTable;
    if (table) {
      this.isActive = table.apiData.content.length > 0;
    }
  }
}
</script>

<style>
.active {
  /* 这里写你需要的active样式，比如： */
  color: #1890ff;
  font-weight: bold;
}
</style>

这种方式更符合Vue的组件设计理念，耦合度更低，子组件主动通知父组件数据变化：

1. 先修改vue-table子组件，监听自身apiData的变化，当content.length改变时触发一个自定义事件，比如content-update，并传递当前长度：

<script>
export default {
  props: ['apiData'],
  watch: {
    'apiData.content.length'(newLength) {
      // 触发自定义事件，把长度传给父组件
      this.$emit('content-update', newLength);
    }
  },
  // 初始化时也触发一次事件，确保状态同步
  mounted() {
    this.$emit('content-update', this.apiData.content.length);
  }
}
</script>

2. 在父组件中监听这个自定义事件，根据传递的长度值更新isActive，从而控制span的类名：

<template>
  <div>
    <span :class="{ active: isActive }">需要切换类的元素</span>
    <!-- 监听子组件的自定义事件 -->
    <vue-table :api-data="apiData" @content-update="handleContentUpdate"></vue-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      apiData: { content: [] },
      isActive: false
    }
  },
  methods: {
    handleContentUpdate(length) {
      this.isActive = length > 0;
    }
  }
}
</script>

如果你的vue-table是第三方组件无法修改的话，方案一就更适合；如果是自己开发的组件，优先选方案二，组件之间的通信会更清晰可控哦～

内容的提问来源于stack exchange，提问作者john_zuk