vue通过props给子组件传值,在组件上使用v-model指令
vue通过props给子组件传值,在组件上使用v-model指令
·
解析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>
更多推荐
已为社区贡献15条内容
所有评论(0)