组件双绑的实现与v-model

最新推荐文章于 2024-04-18 16:58:47 发布

糖包咭

最新推荐文章于 2024-04-18 16:58:47 发布

阅读量88

点赞数 1

分类专栏：组件双绑的实现 v-model与model选项文章标签： vue

本文链接：https://blog.csdn.net/weixin_47952714/article/details/108722927

版权

v-model与model选项同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

组件双绑的实现

0 篇文章 0 订阅

订阅专栏

组件双绑的实现

虽然并不推荐在组件内部修改 props ，但是，有的时候确实希望组件内部状态变化的时候改变 props ，我们可以通过子组件触发事件，父级监听事件来达到这个目的，不过过程会比较繁琐，vue 提供了一些操作来简化这个过程

v-model

v-model 是 vue 提供的一个用于实现数据双向绑定的指令，用来简化 props 到 data，data 到 props 的操作流程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .kkb-radio {
            width: 20px;
            height: 20px;
            background-color: #cccccc;
        }
        .kkb-radio.checked {
            background-color: #92beee;
        }
        .plane {
            border: 1px solid #000000;
            width: 300px;
        }
        .plane .header {
            width: 100%;
            height: 30px;
            background: #cccccc;
        }
        .plane .content {
            height: 100px;
            width: 100%;
            display: none;
        }
        .plane.expanded .content {
            display: block;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- <kkb-radio :checked="val"></kkb-radio> -->
        <kkb-radio v-model="val"></kkb-radio>

        <br /><br /><br />

        <kkb-plane :expanded="val"></kkb-plane>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

        const kkbRadio = {
            model: {
                prop: 'checked',
                event: 'check'
            },
            props: ['checked'],
            data() {
                return {
                    status: this.checked
                }
            },
            template: `
                <div class="kkb-radio" :class="{'checked': status}" @click="changeStatus"></div>
            `,
            methods: {
                changeStatus() {
                    this.status = !this.status;

                    this.$emit('check', this.status);
                }
            }
        };
        const kkbPlane = {
            props: ['expanded'],
            template: `
                <div class="plane" :class="{'expanded': expanded}">
                    <div class="header"></div>
                    <div class="content"></div>
                </div>
            `
        };
        

        let vm = new Vue({
            el: '#app',
            data: {
                val: true
            },
            components: {
                'kkb-radio': kkbRadio,
                'kkb-plane': kkbPlane
            },
            methods: {
                
            }
        });
    </script>
</body>
</html>

model 选项

prop 指定要绑定的属性，默认是 value

event 指定要绑定触发的事件，默认是 input 事件

糖包咭

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
组件双绑的实现与v-model

组件双绑的实现虽然并不推荐在组件内部修改 props ，但是，有的时候确实希望组件内部状态变化的时候改变 props ，我们可以通过子组件触发事件，父级监听事件来达到这个目的，不过过程会比较繁琐，vue 提供了一些操作来简化这个过程v-modelv-model 是 vue 提供的一个用于实现数据双向绑定的指令，用来简化 props 到 data，data 到 props 的操作流程<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫

专栏目录