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>

 

  
posted @ 2020-02-21 18:32  xsan  阅读(1424)  评论(0编辑  收藏