v-bind
在vue2.0中，我们多使用v-bind去绑定传值，但是v-bind是单向绑定，只有父组件传递的内容发生变化，子组件才会更新。
<div id="counter">
<button @click="adds()">加1</button>
<br />
<blog-post v-bind:title="counter" ></blog-post>
</div>
const Counter = {
data() {
return {
counter: 0
}
},
methods:{
adds(){
this.counter++
}
}
}
const app = Vue.createApp(Counter);
app.component('blog-post', {
props: ['counter'],
template: `{
{counter}}`
})
app.mount('#counter');
上面这个代码就是简单的v-bind的简单使用，这时候我们只能去使用this.$emit传递事件，并且在父组件去监听，这样就比较麻烦，为了方便使用，vue2.0可以使用语法糖v-bind.sync去实现这一方法
（因为vue.3.0.sync被移除，所以这里我有换成了vue2.0）
<div id="counter">
<div>父组件展示：{
{obj.age}}</div>
<blog-post v-bind.sync="obj"></blog-post>
</div>
Vue.component('blog-post', {
props:{
age:Number
},
methods:{
add(){
let num = this.age + 1;
this.$emit('update:age', num)
}
},
template:`
<div>
<button @click="add()">点我</button>
<div>{
{age}}</div>
</div>
`
})
new Vue({
el:'#counter',
data:{
obj:{
age:0
}
},
})
上面代码是.sync基本的使用方法，这让我省去在父组件去监听子组件回传的信息。
为了优化使用，
v-model
到vue2.2版本就出现了允许组件使用v-molde进行组件传值但一个组件能有一个
<div id="counter">
<div>父组件展示：{
{age}}</div>
<blog-post v-model:age="age"></blog-post>
</div>
Vue.component('blog-post', {
model: {
prop: 'age',
event: 'change'
},
props:{
age:Number
},
methods:{
add(){
let num = this.age + 1;
this.$emit('change', num)
}
},
template:`
<div>
<button @click="add()">点我</button>
<div>{
{age}}</div>
</div>
`
})
new Vue({
el:'#counter',
data:{
age:0
},
})
上面这是vue2中使用v-molde的其中一种使用方法，还有其他不一样的写法，这一种是我比较长用的，其他的可以参考官方文档
v-molde
到了vue3.0的时候v-molde允许在一个组件上使用多个v-molde，
自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件：
看代码把vue2.0的写法换成vue3.0
<div id="counter">
<div>父组件展示：{
{age}}</div>
<blog-post v-model="age"></blog-post>
</div>
const Counter = {
data() {
return {
age: 0
}
},
}
const app = Vue.createApp(Counter);
app.component('blog-post', {
props: {
modelValue: Number,
},
emits:['update:modelValue'],
methods:{
add(){
let num = this.modelValue += 1;
this.$emit('update:modelValue',num)
}
},
template: `<button @click="add()">加一</button>
<div>子组件展示：{
{modelValue}}</div>
`
})
app.mount('#counter');
在这边我们可以看到，在v-model的时候我们并没有绑定命名。在子组件接收的绑定到modelValue上.
也需要使用emits绑定回调名称，updata:modelValue,当然这也是可以修改的。让我们看一下多v-model绑定的情况
<div id="counter">
<div>父组件展示：{
{age}}</div>
<blog-post v-model:age="age" v-model:name="name"></blog-post>
</div>
const Counter = {
data() {
return {
age: 0,
name:'你好'
}
},
}
const app = Vue.createApp(Counter);
app.component('blog-post', {
props: {
age: Number,
name: String
},
emits:['update:age','update:name'],
methods:{
add(){
let num = this.age += 1;
this.$emit('update:age',num)
}
},
template: `<button @click="add()">加一</button>
<div>子组件展示：{
{age}}</div>{
{name}}
`
})
app.mount('#counter');
上面代码可以看到自定义绑定的参数修改过后的写法。
然后v-molde在使用修饰符的时候，怎么使用。
<div id="counter">
<div>父组件展示：{
{age}}</div>
<blog-post v-model:age.numberb="age" ></blog-post>
</div>
const Counter = {
data() {
return {
age: '10',
}
},
}
const app = Vue.createApp(Counter);
app.component('blog-post', {
props: {
age: Number,
ageModifiers:{
default:() =>(10)
}
},
emits:['update:age'],
methods:{
numberValue(value){
let val = value;
if(this.ageModifiers.numberb){
val = Number(val);
}
return val
},
add(){
let s = this.numberValue(this.age);
let num = s + 1;
this.$emit('update:age',num)
}
},
template: `<button @click="add()">加一</button>
<div>子组件展示：{
{age}}</div>{
{name}}
`
})
app.mount('#counter');
上面的代码，我们自定义了一个修饰符 numberb(把接受的参数转化为数字)，我们可以看到ageModifiers代码上多了一个这个，它是自定义修饰符通过 ageModifiers prop 提供给组件（Modifiers 必要的写法格式）在组件的created周期中 其中值为true ,当修饰符不存在，或者错误的时候默认值为10。
有写的不对的欢迎大家留言