使用 v-model 自定义 Vue 组件

Posted 2023-02-23

【中文标题】使用 v-model 自定义 Vue 组件

【英文标题】：Customized Vue Component using v-model

【发布时间】：2019-07-05 21:55:20

【问题描述】：

Vue 新手在这里。

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

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

大概在单击复选框时，'lovingVue' 的值将被传递给 'checked' 属性，该属性可以是真值或假值。但我不明白 Vue 实例应该是什么样子，想知道是否有人可以向我解释一下？

干杯， 杰夫。

【问题讨论】：

我不这么认为，我不确定 vue 实例应该是什么样子（我知道它需要以某种形式包含 loveVue 属性）

【参考方案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" 值...。这个名称是我们在$event.target 之后提到的.

然后是 lovingVue 部分，您可以在方法中将其作为函数调用（就像您将其视为任何其他事件一样），它将携带值

    new Vue(
    //'#app' is the name of the parent componenet
    el: '#app',
    methods:
      // The e (can be any letter or word) here is the value that was emitted by the
      // child(base-checkbox) to the parent(app)...and this case the value is Boolean
      lovingVue(e)
        console.log(e)
      
    
    )

【讨论】：

希望对你有所帮助:)