Vuejs2 传递v型值

是否可以将v型值传递给另一个组件？我的HTML代码如下所示

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
</div>

  data: {
    checkedNames: []
  }

我可以使用下面的代码在相同的组件中使用这个v型值

<span>Checked names: {{ checkedNames }}</span>

---

但是如何在另一个组件中使用v-model值？

每次勾选其中一个复选框时，您都可以发出具有v-model值的事件：

<input type="checkbox" id="mike" value="Mike" v-model="checkedNames" @change="onChange">
<label for="mike">Mike</label>

methods: {
   onChange () {
       this.$root.$emit('checkbox.changed', this.checkedNames)
    }
}

在组件上下文中，您也应该始终将数据属性声明为函数

data () {
    return {}
}

您的另一个选择是使用状态管理策略，即。

---

，或类似的

我认为“数据必须是函数”语句仅在使用Vue组件时才相关，并不总是如此。他没有指定其他组件的位置-同级、子级、父级？Root使它更容易访问，而且我认为在Root上发射也没有问题。只要你不把它淹没，我非常怀疑这里的情况。但就我个人而言，我更喜欢Vuex 99.99%的时间。V-model为表单输入提供了双向绑定机制。实际上，它只是一个dom事件的包装器，比如key-up和on-change。在v模型中使用值时，v模型实际上会忽略该值，并将vue实例数据视为真理的来源。因此，在本例中不需要它。保留它或丢失它，无论哪种方式，v-model都将是引用值。通过输入元素的id，id=jack，或者通过数组中的索引访问值。

data () {
    return {}
}