网站做百度推广吗,襄阳做网站 优帮云,服务器平台,网站项目设计书根据上一篇《深入理解 v-model 之表单用法》基本对 v-model 有了比较深的理解#xff0c;接下来我们看看它如何在自定义组件中使用。首先#xff0c;我们知道下面两个用法等价的#xff1a;input v-modelmsg /input :valuemsg input接下来我们看看它如何在自定义组件中使用。首先我们知道下面两个用法等价的input v-modelmsg /input :valuemsg inputmsg $event.target.value /在 vue3 中当在自定义组件中使用v-model时组件接收一个属性modelValue的值然后通过触发update:modelValue事件来更新该值custom-comp v-modelmsgcustom-compcustom-comp :model-valuemsg update:model-valuemsg $eventcustom-compv-model 实现根据上面的定义规则我们可以这样实现一个自定义 input 组件// 示例1自定义input组件// 实现1app.component(custom-input, { props: [modelValue], template: :valuemodelValue input$emit(update:modelValue, $event.target.value) ,});// 实现2使用input的v-model computed(计算属性)app.component(custom-input, { props: [modelValue], computed: { value: { get() { return this.modelValue; }, set(v) { this.$emit(update:modelValue, v); }, }, }, template: ,});使用custom-input v-modelmsgcustom-input;上面示例只是对 input 做了一层包装如果自定义组件里面不包含 input 又该如何实现呢为了加深理解我们看下面一个自定义 count 组件示例// 示例2自定义count组件app.component(custom-count, { props: { modelValue: Number, }, methods: { increment() { this.$emit(update:modelValue, this.modelValue); }, decrement() { this.$emit(update:modelValue, --this.modelValue); }, }, template: 1 ~ -1{{modelValue}} ,});使用custom-count v-modelnumcustom-count;我们来看看实现①vue3自定义组件的v-model实现v-model 参数通过示例我们发现 v-model 是接收属性modelValue的值然后触发事件update:modelValue来更新该值那么我们可不可以修改这个属性名modelValue呢该如何操作其实我们只需要给v-model添加参数即可比如v-model:mv这样就将modelValue换成了mv。我们来将上面的自定义组件改造一下app.component(custom-input, { props: [mv], template: :valuemv input$emit(update:mv, $event.target.value) ,});使用方式就变成了custom-count v-model:mvnumcustom-count;多个 v-model 绑定正是由于 vue3 中新增了 v-model 的参数传递所以自定义组件可以同时支持多个v-model的绑定user-name v-model:first-namefirstName v-model:last-namelastNameuser-name组件实现就变成了app.component(user-name, { props: { firstName: String, lastName: String, }, template: typetext :valuefirstName input$emit(update:firstName, $event.target.value) typetext :valuelastName input$emit(update:lastName, $event.target.value) ,});实现效果②绑定多个v-model在 vue2 中当在自定义组件中使用v-model时组件接收一个属性value的值然后通过触发input事件来更新该值custom-comp v-modelmsgcustom-compcustom-comp :valuemsg inputmsg $eventcustom-compv-model 实现实现方式类似我们看下 vue2 中实现一个自定义 input 组件// 示例1自定义input组件Vue.component(comp-input, { props: { value: String, }, template: typetext :valuevalue input$emit(input, $event.target.value) ,});自定义 v-model 属性同样在 vue2 中也支持修改接收的属性名只是和 vue3 不同vue2 是通过在组件中指定属性 model 的 prop 和 event 来修改// 示例2自定义count组件Vue.component(custom-count, { model: { prop: v, // default: value event: i, // default: input }, props: { v: Number, }, data() { return { count: this.v, }; }, template: 1,});我们看到在这个示例里面多了一个model属性并指定了两个属性prop和event没错这正是 v-model 需要的属性和事件名只是他们的默认值为value和input我们通过修改 model 属性的 prop 和 event 就实现了自定义。在线效果③vue2自定义组件的v-model实现关于为什么要出来一个 model 属性官方文档④也有说明就是为了避免和 value 值有其他用途时和 v-model 产生冲突比如单选框、复选框具体可以查看官方示例④。总结自定义组件的 v-model 我们通过在 vue3 和 vue2 中的实现都讲解了一遍而且也能发现了其中的差异vue3 默认属性名、事件名为modelValue和update:modelValue而 vue2 中则是value和inputvue3 中直接通过 v-model 后面参数v-model:foo来指定属性名而且修改体现在父组件中并且支持绑定多个 v-model而 vue2 中通过子组件的model 属性中的prop值和event值来指定属性名和事件名修改体现在子组件中。接下来我们来看下一篇《深入理解 vue 中 v-model 之修饰符》。文章引用链接https://codepen.io/cleam_lee/pen/ExKMYKEhttps://codepen.io/cleam_lee/pen/MWyRpvghttps://codepen.io/cleam_lee/pen/mdPvWvYhttps://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model
