vue自定义组件v-model

Posted xshan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue自定义组件v-model相关的知识，希望对你有一定的参考价值。

  　　  一个组件上的`v-model`默认会利用名为`value`的prop(属性)和名为input的事件，但是像单选框、复选框等类型的输入控件可能会将`value`特性用于不同的目的。这时候我们可以在定义组件的时候，通过设置`model`选项可以用来实现不同的处理方式。
　　在创建组件的时候，添加`model`属性，其中要包含两个属性配置，分别是：
  1. event：什么时候触发v-model行为
  2. prop：定义传递给v-model的那个变量，绑定到哪个属性值上

 下面是实现计数器作用的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>vue自定义组件v-model</title>
</head>

<body>
    <div id="app">
        <Stepper v-model="goodsCount"></Stepper>
    </div>
    <script>
        Vue.component(‘Stepper‘, {
            props: [‘count‘],
            template: `
            <div>
                <button @click="sub">-</button>
                <span>{{count}}</span>
                <button @click="add">+</button>
            </div>
        `,
            model: {
                //event:什么时候触发v-model行为
                event: ‘change-count‘,
                // 定义传递给v-model的那个变量，绑定到哪个属性值上
                prop: ‘count‘
            },
            methods: {
                sub() {
                    // 触发上面model中定义的触发名称
                    // 这里不需要修改this.count的值，只要把最终的结果传递出去就行
                    this.$emit("change-count", this.count - 1)
                },
                add() {
                    this.$emit("change-count", this.count + 1)
                }
            }
        })
        new Vue({
            el: "#app",
            data: {
                goodsCount: 0
            }
        })
    </script>
</body>

</html>

 

　　

以上是关于vue自定义组件v-model的主要内容，如果未能解决你的问题，请参考以下文章

vue3自定义组件使用v-model实现双向数据绑定

vue 自定义组件使用v-model

vue 自定义v-model的组件 修饰符无效，需要改怎么做！

[Vue深入组件]:v-model语法糖与自定义v-model

Vue：从自定义组件派生的自定义组件中的 v-model 和输入事件

Vue学习Vue高级特性