自定义表单组件 v-model

最新推荐文章于 2024-07-19 14:16:29 发布

我只会ctrl cv

最新推荐文章于 2024-07-19 14:16:29 发布

阅读量183

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_40029822/article/details/127208477

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

input

// html
<div id="app">
    <test-input v-model="num"></test-input>
    {{num}}
</div>

// js
let testInput = {
// 子组件内容
    template: `
        <input type="text" :value="value" @input="$emit('input',$event.target.value)">
    `, // *
    props: ['value']  // *
}

const app = new Vue({
    el: '#app',
    data: {
        num: 1,
        value: '' // *
    },
    components: {
        testInput
    }
})
// 标记 //* 是重点
// 子组件中，需要 :value="value" 和 @input="$emit('input',$event.target.value)" 配合才能实现双向绑定

checkbox

// html
<div id="app">
    <test-input v-model="checked"></test-input>
    {{checked}}
</div>

// js
let testInput = {
// 子组件内容
    name: 'testInput',
    template: `
        <input type="checkbox" :checked="checked" @change="$emit('change',$event.target.checked)">
    `, // *
    props: ['checked'], // *
    model: {
        prop: 'checked',
        event: 'change'
    }, // *
}

const app = new Vue({
    el: '#app',
    data: {
        checked: true // *
    },
    components: {
        testInput
    }
})
// 标记 //* 是重点

// 子组件中，需要 :checked="checked" 和 @change="$emit('change',$event.target.checked)"，还需要写入model