做药物分析常用网站,大鹏教育平面设计官网,南海网站推广,还有做网站的必要吗前言
在 Vue 中#xff0c;v-model 是一个常用的指令#xff0c;用于实现表单元素和组件之间的双向绑定。当我们使用原生的表单元素时#xff0c;直接使用 v-model 是很方便的#xff0c;但是对于自定义组件来说#xff0c;要实现类似的双向绑定功能就需要一些额外的处理…前言
在 Vue 中v-model 是一个常用的指令用于实现表单元素和组件之间的双向绑定。当我们使用原生的表单元素时直接使用 v-model 是很方便的但是对于自定义组件来说要实现类似的双向绑定功能就需要一些额外的处理。
本篇文章将介绍几种在自定义组件中实现 v-model 的方式主要如下 使用 v-model 属性适用于表单元素 定义 model 属性适用于非表单元素
除了以上的两种方式外还有我们通常使用的.sync 修饰符[1](2.3.0 新增)主要区别在于使用方式的不同前者直接使用 v-model后者使用 .sync 修饰符进行绑定
一. 单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定父级 prop 的更新会向下流动到子组件中但是反过来则不行。这样会防止从子组件意外变更父级组件的状态从而导致你的应用的数据流向难以理解。 注意每次父级组件发生变更时子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。虽然可以但是如果你这样做了Vue 会在浏览器的控制台中发出警告。 二. 基础原理浅析
v-model 实际上就是 props:value 和 $emit(input) 的组合语法糖简单来说v-model 的使用其实做了两个比较重要的操作理解这两个操作我们就可以轻松实现组件的自定义 v-model v-bind 绑定 value 属性的值 - props:value v-on 绑定 input 事件监听到函数中函数会获取最新的值赋值到绑定的属性中 - $emit(input)
三. 实现 v-model 的两种方式
1. 直接使用 v-model 属性 适用于表单元素或者原组件已经实现了 v-model需要我们进行二次封装 以 input 表单元素为例在 vue 中我们可以直接使用 v-model 进行绑定数据当我们在实现自定义组件custom-component进行封装 input 时我们的组件对外暴露时也需要使用 v-model看下面我们应该如何实现
在自定义组件中我们可以通过在组件内部使用 value 属性和手动触发 input 事件来实现 v-model 的双向绑定效果。具体实现如下
templateinput v-modelnewValue /
/templatescriptexport default {props: {value: {type: Boolean,default: false,},},computed: {newValue: {get() {return this.value;},set(val) {this.$emit(input, val);},},},};
/script使用custom-component
custom-component v-modelnewValue /在上述代码中我们通过 value 属性接收父组件传入的值并且使用 computed 的 set 属性用来监听值的更新手动触发 $emit(input, value) 来将新值传递给父组件从而实现双向绑定的效果。
2. 定义 model 属性 适用于非表单元素完全非表单元素自定义的组件 Vue 允许我们在定义组件中通过定义 model 属性来简化 v-model 的使用。通过定义 model 属性我们可以指定组件中哪个属性的值应该作 v-model 的值。
假如我们实现一个计数器的组件custom-counter在页面中显示两个按钮点击按钮可以进行数值的加减操作具体示例如下
templatedivbutton clickincrement/buttonspan{{ value }}/spanbutton clickdecrement-/button/div
/templatescriptexport default {// 当 model 为默认值时可以将其省略model: {prop: value, // 默认是 valueevent: input, // 默认是 input},props: {value: {type: Number,default: 0,},},methods: {increment() {this.$emit(input, this.value 1);},decrement() {this.$emit(input, this.value - 1);},},};
/script提示当 model 为默认值时可以将其省略 父组件中使用custom-counter
templatedivcustom-counter v-modelcount/custom-counterp计数器的值为{{ count }}/p/div
/templatescriptimport CustomCounter from ./CustomCounter.vue;export default {components: {CustomCounter,},data() {return {count: 0,};},};
/script演示效果如下图所示 在上面的示例中CustomCounter组件接收一个value属性来接收父组件传递的值并在点击按钮时修改value属性的值。通过调用this.$emit(input, newValue)触发input事件将新的value值传递给父组件进行更新。
在父组件中使用v-model将父组件中的count属性绑定到CustomCounter组件的value属性上绑定 input 事件监听到函数中从而实现了数据的双向绑定。
model 是允许 vue 自定义组件使用 v-model 的关键虽然有时我们不显性的使用它也不影响我们在自定义组件中使用 v-model 指令这只是因为被设置默认值。而有的时候显示的使用并自定义 model 的 prop 和 event 会有益。 注意允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。 四. .sync 修饰符 适用于提供于多个双向绑定的 prop灵活提供你想要绑定的 property 名 在有些情况下我们可能需要对一个 prop 进行 “双向绑定”。但是真正的双向绑定会带来维护上的问题因为子组件可以变更父组件且在父组件和子组件两侧都没有明显的变更来源。
这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。
举个例子还是上面的计数器的例子在一个包含 count prop 的计数组件中我们可以用以下方法表达对其赋新值的意图
this.$emit(update:count, newCount);然后父组件可以监听那个事件并根据需要更新一个本地的数据 property。例如
custom-counter v-bind:countcount v-on:update:countcount $event /我们为这种模式提供一个缩写即 .sync 修饰符如下
custom-counter :count.synccount/custom-counter以上的两种写法是等价的 注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:count.sync”count 1” 是无效的)。取而代之的是你只能提供你想要绑定的 property 名类似 v-model。 五. 总结
本篇文章介绍了在 Vue 自定义组中实现 v-model 的几种方式包括定义 model 属性和使用 v-model 属性。通过以上案例实际分析相信大家都已经了解这几种方式的创建以及应用场景以便更加灵活地应用到实际项目中。
以上面两种方式为例我们可以灵活地根据自己的需求选择合适的方式来实现自定义组件 v-model。如果是表单元素可以直接使用 v-model 属性如果是非表单元素可以通过定义 model 属性指定组件中哪个属性的值应该作 v-model 的值。
除此之外使用 .sync 修饰符也是进行自定义组件双向绑定的优秀选择因此在实际开发中选择适合自己项目需求的方式是最重要的。
参考资料
Prop
自定义事件
.sync 修饰符
