v-model原理
如input:利用oninput事件监听input内容的变化,利用$event.target.value获取 实时内容,然后传递给组件中的变量,同时,input标签上利用v-bind又将value动态绑定值改变量,实现双向绑定
目录
1.传统绑定使用方法.
模拟案例是一个加减的方法.
先注册对应组件.可以使用全局注册或者局部注册.或者全自动注册.
// 全局注册组件 在main.js中
import Nume from './views/dashboard/link.vue'
Vue.component(Nume.name, Nume)
// 如果在这里报错提示大小写.请自己在子组件中添加对应的name
子级中对应的代码
<template>
<div>
<button @click="fn(-1)">-</button>
<input type="text" :value="numFn">
<button @click="fn(1)">+</button>
</div>
</template>
<script>
export default {
name: 'Nume',
//父传子
props: {
numFn: {
//接收的数据类型
type: Number,
//接收的默认值
default: 1
}
},
methods: {
fn(set) {
this.$emit('input', this.numFn + set)
}
}
}
</script>
<style>
</style>
父级中输入
<template>
<div>
<Nume :num-fn="numFn" @input="input" />
</div>
</template>
<script>
export default {
data() {
return {
numFn: 1
}
},
methods: {
input(obj) {
this.numFn = obj
}
}
}
</script>
<style>
</style>
第二种 利用v-model解决的方法,
父级的代码
<template>
<div>
<Nume v-model="numFn" />
</div>
</template>
<script>
export default {
data() {
return {
numFn: 1
}
}
}
</script>
<style>
</style>
子级
<template>
<div>
<button @click="fn(-1)">-</button>
<input type="text" :value="value">
<button @click="fn(1)">+</button>
</div>
</template>
<script>
export default {
name: 'Nume',
props: {
value: {
type: Number,
// 设置默认值
default: 1
}
},
methods: {
fn(set) {
this.$emit('input', this.value + set)
}
}
}
</script>
<style>
</style>
// 因为默认值设定的是value 和input 所以可以省略model的定义.
// 如果更换名字.就必须在子组件中设置对应更换的名字
model: {
prop: 'value',
event: 'input'
},