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。

有写的不对的欢迎大家留言