主页 / 问题 / 958020
Accepted
Alex Sazonov
Asked:2020-03-18 18:56:36 +0000 UTC2020-03-18 18:56:36 +0000 UTC

动态跟踪道具

  • 772

假设有这样的事情：

<div class="parent">
  <my-component :data="someData"/>
</div>

我的组件：

<div :class="{'super-class': someData}"></div>

父母看起来像这样：

data() {
  return {
    condition: false
  }
},
computed() {
  someData() {
    return condition === true ? true : false;
  }
}

在我的组件中是这样的：

props: ['data'],
Other not important logic...

事实上，问题在于，在父组件中的某个时刻，计算机属性 someData 变为 true，并且此事件有必要影响子组件，但由于某种原因，它不会。关于如何解决它的任何想法？

javascript

1 个回答

  1. Best Answer

    computed属性在子组件中也可以正常工作，请参见我的示例：

    Vue.component('child',{
  props: {
    data: {
      type: Boolean
    }
  },
  template: `<div :class="{'super-class': data}">Text</div>`
});

new Vue({
  el: '#app',
  data() {
    return {
      condition: false
    }
  },
  computed: {
    someData() {
      return this.condition;
    }
  },
  mounted() {
    setInterval(() => {
      this.condition = !this.condition;
    }, 1000);
  }
})
    .super-class {
  font-size: 25px
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="parent">
  <child :data="someData"/>
</div>

    • 1

相关问题