Vue.js

Question

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 的解决方案进行更多尝试后，我现在运行遇到的问题是，当涉及多个子组件时, 由于 Parent 的 myBooleanVar 的一个奇异值驱动了整个事情，选中一个子组件的框会导致 all 个子组件被选中。

因此，在视图和数据操作都移交给父级方面肯定是进步，但我仍在尝试弄清楚如何“隔离”这种情况，以便仅对一个子组件执行操作被拉进派对...

Answer 1

您可以将数据保存在 parent 中，将其作为道具提供给 child，让 child 监视道具并更新其内部状态，最后发出当 child 的内部状态已更改时 parent 的事件。

parent

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

child

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

Answer 2

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

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

看看这个答案：

Vue.js - 如何在数据对象发生变化时发送给父组件？

Vue.js - How to emit to parent component on change in data object?

vue-component

two-way-binding

v-model

vue-data