什么是双向数据绑定？
在前端开发中，经常需要将模型数据（如输入框中的文本）实时更新到视图中（如页面中的文本展示），或者将视图更新到模型中。这种数据的双向传递称为双向数据绑定。
Vue.js 是一种流行的前端框架，它使用虚拟 DOM 和响应式数据绑定的方式实现了双向数据绑定。在 Vue.js 中，使用 v-model 指令可以方便地实现双向数据绑定。
v-model 指令的使用方法
v-model 指令可以方便地将表单元素（如 input、textarea、select 等）的值与模型数据进行绑定。当表单元素的值发生变化时，模型数据会自动更新；当模型数据发生变化时，表单元素的值也会自动更新。
下面是一个简单的示例，演示了如何使用 v-model 指令实现双向数据绑定：
-- -------------------- ---- -------
----------
-----
------ ----------- -------------- --
----------- ---- ------
------
-----------
--------
------ ------- -
------ -
------ -
----- ---
--
--
--
---------在上面的代码中，我们使用了 v-model 指令将 input 元素的值与 data 中的 text 属性进行了双向绑定。当 input 元素的值发生变化时，text 属性会自动更新；当 text 属性发生变化时，input 元素的值也会自动更新。
使用 v-model 指令实现自定义组件的双向数据绑定
除了表单元素，我们也可以使用 v-model 指令实现自定义组件的双向数据绑定。下面是一个示例，展示了如何使用 v-model 指令实现一个简单的计数器组件的双向数据绑定：
-- -------------------- ---- -------
----------
-----
------- -----------------------------
-------- ----- ---------
------- -----------------------------
------
-----------
--------
------ ------- -
------ -
------ -
----- -------
-------- --
--
--
------ -
------ -
------ -----------
--
--
-------- -
----------- -
-------------
------------------- ------------
--
----------- -
-------------
------------------- ------------
--
--
--
---------在上面的代码中，我们定义了一个 Count 组件，它包含了一个计数器和两个按钮。我们使用了 v-model 指令将 Count 组件的 value 属性与组件内部的 count 属性进行了双向绑定。当 count 属性发生变化时，value 属性也会自动更新；当 value 属性发生变化时，count 属性也会自动更新。
为了实现双向数据绑定，我们在 Count 组件内部定义了两个方法：decrement 和 increment。当用户点击 - 按钮时，组件内部的 count 属性会减一，并触发一个名为 input 的自定义事件，将更新后的 count 值作为参数传递给父组件；当用户点击 + 按钮时，组件内部的 count 属性会加一，并触发 input 自定义事件，同样将更新后的 count 值作为参数传递给父组件。
在父组件中，我们可以使用 v-model 指令将 Count 组件的 value 属性直接绑定到一个模型数据上，实现 value 和模型数据的双向绑定。下面是使用 Count 组件的示例：
-- -------------------- ---- -------
----------
-----
------ ------------------------
---------- ----- ------
------
-----------
--------
------ ----- ---- --------------
------ ------- -
----------- -
------
--
------ -
------ -
------ --
--
--
--
---------在上面的代码中，我们定义了一个父组件，在模板中使用了 Count 组件，并将其的 value 属性与 count 模型数据进行了双向绑定。当用户点击 Count 组件中的按钮时，父组件的 count 模型数据会自动更新；当父组件的 count 模型数据发生变化时，Count 组件中的 value 属性也会自动更新。
总结
v-model 指令是 Vue.js 中实现双向数据绑定的重要手段。通过它，我们可以方便地将表单元素或自定义组件的数据与模型数据进行绑定，实现双向数据传递。在自定义组件中，我们需要定义 input 自定义事件，并在组件中手动触发该事件，以实现双向数据绑定。掌握了 v-model 指令的使用方法，可以提高我们开发 Vue.js 项目的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64547086968c7c53b085618d