vue3:自定义组件之v |
您所在的位置:网站首页 › vue30自定义组件 › vue3:自定义组件之v |
vue3.x移除了vue2.x的model选项,自定义组件双向绑定不在使用以下方法: // vue2的v-model双向绑定方法 model: { prop: 'value', //3.x默认值改为了modelValue event: 'input' //3.x默认值改为了update:modelValue }, //使用 this.$emit('input', index);vue3.x采用以下方式(v-model默认对应的prop值是modelValue): 父组件: 子组件: export default { name: 'MenusComponent', props: { modelValue: { type: Number, default: 0, }, }, methods: { clickMenu(index) { this.$emit('update:modelValue', index); }, }, };vue3.x可以绑定多个v-model: 父组件: 子组件: export default { name: 'MenusComponent', props: { modelValue: { type: Number, default: 0, }, text: { type: String, default: '0', }, }, methods: { clickMenu(index) { this.$emit('update:modelValue', index); }, textChange(str) { this.$emit('update:text', str); }, }, };vue3.x去掉了v-model的.sync修饰符,其他的比如.trim依然可以使用,新增自定义修饰符 父组件 子组件 export default { name: 'test', props: { modelValue: { type: String, default: 'eee', }, modelModifiers: { // 获取modelValue修饰符 type: Object, default: () => ({}), }, text: { type: String, default: 'eee', }, textModifiers: { // 获取text修饰符 type: Object, default: () => ({}), }, }, methods: { inputf(e) { let { value } = e.target; if (this.modelModifiers.toLowerCase) { value = value.toLowerCase(); } this.$emit('update:modelValue', value); }, input2f(e) { let { value } = e.target; if (this.textModifiers.toUpperCase) { value = value.toUpperCase(); } this.$emit('update:text', value); }, }, }; |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |