组件中使用 v-model

最新推荐文章于 2024-09-30 10:50:08 发布

weixin_34324081

最新推荐文章于 2024-09-30 10:50:08 发布

阅读量101

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5b3da8c1f265da0fae4efc91

版权

<body>
    <div id="demo">
        你兜里有{{count}} 'count'
        
        '此处v-model 绑定了一个count值 还绑定了一个input事件 input会自动接受传递过来的参数并赋值给count'
        <vl-text v-model="count"> </vl-text>  'count'
    </div>
</body>
<script>
    var app = new Vue({
            el:'#demo',
            data:{
                count:1000
            },
            components:{
                'vlText':{  //template data  mdehods 同级
                    template:'<div>\
                    <button @click="buttonadd"> + </button> \
                    </div>',

                    data:function(){
                    return{
                        tal:1000
                         }
                    },
                    methods:{
                        buttonadd:function(){
                            this.tal=this.tal+1000
                            '触发input事件  把this.tal 传递给v-model的count'
                            this.$emit('input',this.tal) 
                        }
                    }
                } 
            }
    })
</script>

</html>
复制代码