Vue之高級組件

v-model在局部組件的使用，如何使用局部組件實現數據的共享

需要自定義兩個組件
<compa :user="username"></compa>

<script>
       //局部組件
       const compb={   //定義一個b組件
           props:['user'],
            template:'<h2>hello ???-{{user}}</h2>'
        }
        const compa={ //定義一個a組件
            props:['user'],
            template:`
            <div>
                <h1>
                    hello
                </h1>
                <compb :user="user"></compb> //把b組件嵌套在a組件里，這里必須要加一個外層的div進行包裹
            </div>
            `,
            components:{
                compb
            }
        }
        var vm = new Vue({
            el: "#app",
            data:{
                username:'zhangsan'
            },
            components:{
                compa,
            }         
        })
    </script>

v-model在局部組件的使用

<custom-checkbox v-model="checkvalue"></custom-checkbox>

<script>
        Vue.component('custom-checkbox',{
            model:{
                prop:"checked",//默認值為：value
                event:"change",//默認值為：input
            },
            props:{
                checked:Boolean,//默認值為：value:String
            },
            template:`
            <input type="checkbox" :checked="checked" @change="$emit('change',$event.target.checked)"/>
            `
        })
        var vm =new Vue({
            el:"#app",
            data:{
                checkvalue:true
            }
        })
    </script>

.sync修飾符：可以對數據進行修改

<custom-input :username.sync="username"></custom-input>

<script>
        Vue.component('custom-input',{            
            template:`
            <input type="text" @change="$emit('update:username',$event.target.value)"/>
            `    
        })
        var vm =new Vue({
            el:"#app",
            data:{
                username:''
            },
        })
    </script>