Javascript 在vue的childcomponent中将方法从父对象传递给侦听器

我在我的父组件App.vue中有一个按钮，希望收听按钮单击我的子组件并在每次单击按钮时传递一个递增的数字。目前，我正在将该值作为道具传递，并使用

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>

<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>

给孩子
从“/components/Mycomponent”导入Mycomponent；
导出默认值{
名称：“应用程序”，
组成部分：{
真菌成分
},
数据（）{
返回{
计数：0
};
},
方法：{
myMethod（）{
这个.count++；
}
}
};

Mycomponent.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>

<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>

{{myNumber}}
导出默认值{
名称：“Mycomponent”，
道具：{
myProp：{
类型：编号
}
},
数据（）{
返回{
我的号码：0
};
},
观察：{
myProp：{
深：是的，
立即：是的，
处理程序（newValue）{
试一试{
log（“在领事馆中打印我的值：”，newValue）；
this.myNumber=newValue
}捕捉（错误）{
log（“还没有数据…”）；
}
}
}
}
};

更新了到达子组件中道具的示例

<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>

//如果我不想在模板中显示myProp怎么办？只需存储数据即可
{{myProp}}
方法
导出默认值{
名称：“Mycomponent”，
道具：{
myProp：{
类型：编号
}
},
方法：{
myMethod（）{
log（“打印myProp”，this.myProp）；
}
}
};

---

但是如果我不想显示该值，那该怎么办呢？只需将道具用作数据？

实际上您不需要观察者。道具是被动的，如果您只是引用

{myProp}

在子组件的模板中，只要单击按钮，它就会重新呈现。

谢谢！当然。：）如果我想在另一个函数中访问道具，我只需使用：

this.myProp

，如上面更新的示例所示？但是如果我不想显示该值，该怎么办？只需将道具用作数据？任何引用道具（通过

this.MyProp

）将有权访问当前值的任何内容，即使当前值已更改。如果道具更改，任何引用道具的计算属性都将自动重新运行。