Vue中如果不通过v-model实现双向绑定？下面本篇文章给大家介绍一下不使用v-model，实现双向绑定的方法，希望对大家有所帮助！
不使用v-model，如何实现双向绑定？
有人说，这种小白问题，也好意思问？
你别说，我初学vue的时候，可是被这些问题折磨得死去活来的，硬着头皮照着官网文档demo写，会用之后，日常开发也写出过很多跟 v-model 相关的bug，后来下定决心仔细研究一下之后，才发现这里面的门道还有点多，且听我细细讲来。
先来看解答：
不使用 v-model，就需要通过 value 属性绑定值和 input 事件改变绑定值来实现双向绑定。
换句话说，v-model只是一种简写形式而已
事实上，v-model 的本质就是语法糖，它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 -- 官方文档
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。
与本题相关联的知识延伸
双向绑定
单向数据绑定
vue 组件之间交互的单向数据流
问：什么是双向绑定？
双向绑定就是当数据变化之后，视图同步更新，当视图变化之后，数据也会更新。
问：什么是单向数据绑定?
单向数据绑定就是当数据变化之后，视图同步更新，当视图变化之后，数据不会更新。
在vue中是通过指令 v-model 来实现双向绑定，通过 v-bind 来实现单向数据绑定
看完下面这段代码和这段代码运行的gif演示，你就能明白他们的区别了。
从图中可以看出，使用 v-model，当数据变化之后，视图同步更新，当视图变化之后，数据也会更新，这就是双向绑定。
使用 v-bind，当数据变化之后，视图同步更新，当视图变化之后，数据不会更新，这就是单向数据绑定。
问：什么是 vue 单向数据流？
子组件不能改变父组件传递给它的 prop 属性，推荐的做法是它抛出事件，通知父组件自行改变绑定的值。
总结起来就是数据向下，事件向上。
vue 文档在介绍 Prop 时就提出了单向数据流的概念，点击此处 查看 vue 文档对单向数据流的说明。
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
我们看下面这个例子：
子组件直接对 prop 值做双向绑定，会发生什么？
父组件代码：
子组件代码：
可以看到，childComponent中的 prop 值可以实现双向绑定，但是 FatherComponent 中的 data 值并未发生改变，而且控制台抛出了警告：
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"
翻译一下：避免直接改变 prop 值，因为每当父组件重新渲染时，该值将被覆盖。相反，使用基于 prop 值的 data 或 computed。
很显然，直接改变子组件的 prop 值的这种行为被 vue 禁止了。
如何操作传入子组件的 prop 值
但是很多时候，我们确实要操作传入子组件的 prop 值，该怎么办呢？
正如上面的警告所说，有两种办法：
这个 prop 用来传递一个初始值，定义一个本地的 data property 并将这个 prop 用作其初始值
props: {
initialCounter: {
type: Number,
default: 0
},
},
data() {
return {
counter: this.initialCounter
}
}
这个 prop 以一种原始的值传入且需要进行转换，用这个 prop 的值来定义一个计算属性
props: {
size: {
type: String,
default: ''