解析v-model 一般用于表单元素 或者下拉框

当v-model用于组件的时候 相当于v-bind:value=“num” 默认传递一个名字叫value的props数据

v-on:input= “e=>num=e.target.value” 默认监听组件内部的input事件

案例:点击按钮 加减

根组件app.vue

<template>
    <div>
       <count v-model="num"></count>
    </div>
</template>
<script>
    import count from './components/count.vue';
</script>

 子组件 count.vue

<template>
<div>
    <button @click=handle(-1)>-</button>
    <input type="text" :value="value">
    <button @click=handle(1)>+</button>
</div>
</template>
<script>
export default {
    props:['value'],
    data(){
        return {
            // num:0
        }
    },
    methods:{
        handle:function(count){
            this.$emit('input',this.value+count)
        }
    }
}
</script>

Logo

前往低代码交流专区

更多推荐