在vue的childcomponent中，将一个方法从parent传给listener。

Question

我的父组件App.vue中有一个按钮，我想监听我的子组件上的buttonclick，并在每次按钮被点击时传递一个递增的数字。目前，我将该值作为一个道具传递给我的子组件，并在我的子组件中用一个 "增量 "按钮来监视变化。watch: {

这很好用。但是由于我对vue很陌生，我想知道有什么更好的方法吗，或者这是推荐的方法？

App.vue

<template>
  <div id="app">
    <button @click="myMethod">To child</button>
    <Mycomponent :myProp="count" />
  </div>
</template>

<script>
import Mycomponent from "./components/Mycomponent";

export default {
  name: "App",
  components: {
    Mycomponent
  },

  data() {
    return {
      count: 0
    };
  },
  methods: {
    myMethod() {
      this.count++;
    }
  }
};
</script>

Mycomponent.vue

<template>
  <div>
    {{myNumber}}
  </div>
</template>
<script>

export default {
  name: "Mycomponent",
  props: {
    myProp: {
      type: Number
    }
  },

  data() {
    return {
      myNumber: 0
    };
  },

  watch: {
    myProp: {
      deep: true,
      immediate: true,
      handler(newValue) {
        try {
          console.log("Print my value in the consule: ", newValue);
          this.myNumber = newValue
        } catch (err) {
          console.log("no data yet ...");
        }
      }
    }
  }
};
</script>

更新的儿童成分中达到道具的例子。

<template>
  <div>
// what if I dont want to display myProp in the template? Just store the data
    {{myProp}} 
    <button @click="myMethod">Method</button>
  </div>
</template>
<script>
export default {
  name: "Mycomponent",
  props: {
    myProp: {
      type: Number
    }
  },
  methods: {
    myMethod() {
      console.log("print myProp ", this.myProp);
    }
  }
};
</script>

但是如果我不想显示数值呢。只是使用道具作为数据？

Answer 1

其实你不需要监视器。道具是反应式的，如果你只是引用了 {{ myProp }} 在子组件的模板中，每当按钮被点击时就会重新渲染。