Vue.js-如何在数据对象更改时向父组件发出信号？

如何解决Vue.js-如何在数据对象更改时向父组件发出信号？

使用v-model在组件内的视图和数据模型之间创建双向绑定。而且视图交互可以向父组件发出事件。

但是，是否有可能在子组件中更改数据模型，从而将事件发送给父组件？

因为只要是单击复选框的用户，父级和子级都可以正常运行（数据模型更新并且事件被发出）。但是，如果我拉起Vue开发工具并在子组件的数据中切换复选框，则v-model的双向绑定将在CHILD组件中进行适当的更新，但是没有任何更新可以传递给父组件组件（我怀疑是因为未发出事件）。

如何确保父组件“知道”子组件中的数据更改？我认为这一定有可能...如果不从子组件发出，也许有某种方法可以让父组件“监视”子组件的数据？

感谢您的帮助或指导！同时，我将继续阅读并寻找答案！

子组件

<template>
  <div class="list-item" v-on:click="doSomething">
    <input type="checkBox" v-model="checked">
    <label v-bind:class="{ checked: checked }">{{ name }}</label>
  </div>
  ...
</template>

<script>
  ...
  data: function() {
    return {
      checked: false,}
  },methods: {
    doSomething() {
      ...
      this.$emit('doSomething',this)
    }
  }
</script>

父级组件

<template>
  <ChildComponent v-on:doSomething="getItDone"></ChildComponent>
  ...
</template>

<script>
  ...
  methods: {
    getItDone(target) {
      ...
    }
  }
</script>  

---

更新：在使用@IVO GElov解决方案多了一些之后，我现在遇到的问题是，当涉及多个Child组件时，因为Parent是myBooleanVar的一个奇异值驱动整个事情，选中一个子组件的框会导致 all 所有子组件都被选中。

因此，视图和数据操作都可以移交给父级，这无疑是一个进步，但是我仍在尝试找出如何“隔离”这种情况，以便仅对作用于其上的一个子级组件进行拖动参加聚会...

解决方法

您可以将数据保留在父级中，以道具的形式提供给孩子，让孩子观看道具并更新其内部状态，最后在孩子的内部状态为改变了。

父母

<template>
  <ChildComponent v-model="myBooleanVar" />
  ...
</template>

<script>
  data()
  {
    return {
      myBooleanVar: false,}
  },watch:
  {
    myBooleanVar(newValue,oldValue)
    {
      if (newValue !== oldValue) this.getItDone(newValue);
    }
  },methods: 
  {
    getItDone(value) 
    {
      ...
    }
  }
</script>  

孩子

<template>
  <div class="list-item">
    <input type="checkbox" v-model="checked">
    <label :class="{ checked: checked }">{{ name }}</label>
  </div>
  ...
</template>

<script>
  props:
  {
    value:
    {
      type: Boolean,default: false
    }
  }
  data() 
  {
    return {
      checked: this.value,watch:
  {
    value(newVal,oldVal)
    {
      // this check is mandatory to prevent endless cycle
      if(newVal !== oldVal) this.checked = newVal;
    },checked(newVal,oldVal)
    {
      // this check is mandatory to prevent endless cycle
      if(newVal !== oldVal) this.$emit('input',newVal);
    }
  },</script>

,

也许您可以使用v-bind="$attrs"

将复选框属性直接绑定到父属性

看看这个答案：https://stackoverflow.com/a/56226236/10514369