码迷,mamicode.com
首页 > 其他好文 > 详细

vue自定义组件v-model

时间:2020-02-21 20:37:56      阅读:79      评论:0      收藏:0      [点我收藏+]

标签:change   不同的   结果   doctype   mod   sub   class   button   自定义组件   

      一个组件上的`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

标签:change   不同的   结果   doctype   mod   sub   class   button   自定义组件   

原文地址:https://www.cnblogs.com/xshan/p/12342509.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!