数组在对象内部时如何使用监视？

Question

我在对象内部有数组

    Vue.component('greeting', {
      template: '<button @click="cool">getdate! </button> ',
      data :function () {
        return {
          message:"15/10/1999",
        }
      },
      methods:{
        cool(){
          this.$parent.info.date.push(this.message);
        }
      }
    });
    
    
    var vm = new Vue({
      el: '#app',
      data:{
      name:"",
        info:{
          date:[]
        }
      }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
      <greeting></greeting>
      {{info.date}}
    </div>

我从组件发送了日期，但它不能正常工作。

在这种情况下如何在vuejs中使用手表

Answer 1

Vue 的方法是从您的组件向其父组件发出事件。这尊重了Vue的one-way data-flow概念。

如果您想在其他属性更改时更改一些数据属性，建议您使用计算属性，而不要使用 watch 。

例如...

Vue.component('greeting', {
  template: '<button @click="cool">getdate!</button> ',
  data () {
    return {
      message: "15/10/1999"
    }
  },
  methods:{
    cool(){
      this.$emit('click', this.message)
    }
  }
});

new Vue({
  el: '#app',
  data:{
    info:{
      date: []
    }
  },
  methods: {
    addDate (date) {
      this.info.date.push(date)
    }
  },
  computed: {
    name () {
      return this.info.date.length ? 'Jack' : ''
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<div id="app">
  <greeting @click="addDate"></greeting>
  <pre>info = {{ info }}</pre>
  <pre>name = {{ name }}</pre>
</div>