使用v模型的自定义Vue组件

Question

这里是新手。

阅读有关视图组件的以下指南：

https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model

大概是在单击复选框后，“ lovingVue”的值将传递到“ checked”道具，该道具将为true或false值。但是我不了解Vue实例的外观，想知道是否有人可以向我解释这一点？

干杯， Geof。

Answer 1

JS Fiddle Demo（使用时打开控制台）

嘿，杰弗里，

首先，我认为我也是新手，我将永远是：）....

Vue.component()是一种制作组件模板的方法，但是可以在脚本中而不是HTML模板中...。仍然需要启动new Vue()实例。

子组件内部的"$emit('change', $event.target.checked)只是子组件将值发送回父组件的一种方式...

$emit()接受的第一个参数是事件侦听器名称（可以是任何单词）check this link，因此这就是<base-checkbox @change="lovingVue">这里的事件侦听器被称为@change的原因。

它采用的第二个参数是您要发送回父级的值...在这种情况下，我们要发送v-bind:checked="checked"值。...而这个名称就是我们在{ {1}}。

然后是$event.target部分，您可以在方法中将其称为函数（就像您将其视为任何其他事件一样），它将随其携带值

lovingVue