自定义组件使用v-model 绑定

1.组件上使用 v-model = " bookList"

<ipms v-validate="{type:'list',value:bookList,notNull:true}" v-model="bookList"></ipms>

2.组件中代码:props是对象

Vue.component("ipms",{
    data:function(){
        return {
            name:""
        }
    },
    props:{
        //v-model 默认是将value作为属性传给子组件中 ,故这里用value (如果是对象类型,不需要watch或conputed来监控value,
        // 简单类型的话需要自己去接收值和向父组件发布值)
        value:{
            type:Array,
            default:function(){
                return [];
            }
        },
    },
    methods:{
        add(){
            this.value.push({name:this.name});
        }
    },
    watch:{
        
    },
    computed:{
        
    },

    template:`<div>
                    <div>
                        <input type="text" v-model="value"><button @click.prevent="add">添加</button>
                    </div>
                    <div v-for="item in value">{{item.name}}</div>
            </div>`
})

3.组件中代码:props是简单类型,需要自己去接受value,和发布value

Vue.component("ipms",{
    data:function(){
        return {
            name:""
            
        }
    },
    props:{
        value:{
            // type:Array,
            // default:function(){
            //     return [];
            // }
            type:String,
            default:""
            
        },
    },
    created:function(){
        
    },
    methods:{
       
    },
    watch:{
        value:function(newVal){
            this.name = newVal;
        },
        name:function(newVal,oldVal){
            this.$emit('input',newVal);
            this.$emit('change',newVal);
        }
    },
    computed:{
       
    },

    template:`<div>
                    <div>
                        <input type="text" v-model="name"><button @click.prevent="add">添加</button>
                    </div>
                    <div v-for="item in value">{{item.name}}</div>
            </div>`
})