在 Vue.js 中，组件的 model 选项用于控制父组件与子组件之间的双向数据绑定。默认情况下，在子组件中修改 model 值时，不会影响父组件中对应的值，而仅仅是触发一个名为 input 的自定义事件。但是，在某些情况下，我们需要更灵活地控制双向绑定的行为，比如自定义组件没有一个明显的“表单输入框”，或者需要实现特定的数据转换逻辑。这时，我们可以使用自定义组件的 model 选项来完成这个任务。本文就将介绍如何在 Vue.js 中使用自定义组件的 model 选项。
什么是自定义组件的 model 选项？
在 Vue.js 中，组件的 model 选项是一个对象，用于控制该组件的数据双向绑定行为。它包含两个属性：prop 和 event。
prop
prop 是一个字符串，用于指定该组件在父组件中绑定的数据属性名称，默认是 value。举个例子，假设我们有一个自定义组件，它是一个数字输入框，用于输入一定范围内的数字。我们期望在父组件中通过 v-model 指定该数字值，那么我们可以在组件定义时，使用 model 选项指定 prop 属性为 numberValue，如下所示：
-- -------------------- ---- -------
-------------------------------- -
------ -
-- -- ---- --- -----------
------------ -
----- -------
--------- ----
-
--
-- ---
---这样，在父组件中使用 v-model 绑定数据时，就可以指定 prop 属性为 numberValue，如下所示：
<my-number-input v-model="myNumber"></my-number-input>
event
event 也是一个字符串，用于指定在子组件中修改数据时，触发的自定义事件名称，默认是 input。也就是说，在子组件中修改 prop 属性的值时，会自动触发一个名为 input 的自定义事件，父组件可以通过 @input 监听该事件，并更新自己的数据。还是以数字输入框为例，假设我们在组件表现层不希望使用原生的 input 元素，而是使用一个自定义的 RangeSlider，它可以实现滑动选择数字的效果，那么我们可以在组件定义时，使用 model 选项指定 event 属性为 change，如下所示：
-- -------------------- ---- -------
-------------------------------- -
------ -
------------ -
----- -------
--------- ----
-
--
-- -- ----- --
------ -
-- -- ---- --- -----------
----- --------------
-- ---- ---- ------------ ------
------ --------
--
--------- -
---- -------------------------------
------------ -------------------------- ---------------------- --
------
--
-------- -
------------------ -
-- - -------- -----------
----- ------------ - ---------------------
-- ---------------------- -
-- --------------- ----- --
-------------------- --------------
-
-
-
---这样，在父组件中使用 v-model 绑定数据时，就可以指定自定义事件 change，如下所示：
<my-number-input v-model="myNumber" />
实现自定义的数据转换
在实际开发中，我们通常会遇到一些需要特殊的数据转换逻辑的场景。比如，我们需要在父组件中输入一个百分数(如50%)，而实际上组件中使用的是小数表示(如0.5)。这个时候，我们需要在组件内部实现一个特殊的数据转换逻辑，将百分数转换为小数，再绑定到组件的 prop 属性中。在组件内部，我们可以利用 :value 属性实时更新组件内部的值，然后在自定义事件中将转换后的值绑定到 :value 上。如下所示：
-- -------------------- ---- -------
--------------------------------- -
------ -
-- -- ---- --- ------------
------------- -
----- -------
--------- ----
-
--
-- -- ----- --
------ -
-- -- ---- --- ------------
----- ---------------
-- ---- ---- ------------ ------
------ --------
--
--------- -
---- --------------------------------
---- ------------------------------ --------------------------- --------
------ ------------ ------- --------- -------------------- - ---- ---------------- --
------
--
-------- -
-- -----------
-------------------- -
------ --------- - -------------------
--
-- ----------------------
-------------- -
----- ------------ - ------------------------------ - ----
-- ---------------------- -
-- --------------- ----- --
-------------------- --------------
-
-
-
---在父组件中使用该组件时，就可以直接将百分数绑定到 v-model 中，如下所示：
<my-percent-input v-model="myPercent"></my-percent-input>
总结
本文介绍了在 Vue.js 中如何使用自定义组件的 model 选项来控制双向数据绑定。通过指定 prop 属性和 event 事件，我们可以实现更灵活的双向绑定逻辑。特别是在需要进行特定数据转换的场景下，自定义组件的 model 选项提供了一种方便的实现方式。同时，我们还提供了两个具体的示例代码，供读者参考。如果您有兴趣深入学习 Vue.js，可以继续阅读 Vue.js 的官方文档，深入了解更多的细节和用法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6459cc10968c7c53b0be9d01