Vue之高级组件

Posted 2021-03-02 zmlaliiqsgu

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>