vue基础(7)--v-model 双向绑定

183 阅读1分钟

import Vue from 'vue'
cosnt component = {
    props: ['value','value1'],    
    template:
        `<div>
             <input type="text" @input="handleInput" :value="value1">
         </div>`,
    data(){
        return { 
            text:0
        }
    },
    model:{             //专门用作v-model
        prop:'value1',  // 
        event:'change'  //
    },
    methods:{
        handleInput(e){ 
            this.$emit('change',e.target.value)//修改数据时,传出一个方法
        } 
    }}

new Vue({
    el:'#root',
    components:{
       CompOne:component
    },    propsData:'xxx ', //prop传入失败
    data:{
        return {
            value:"123"
        }
    },
    mounted(){
        cosnole.log('后调用')
    },
    template:
        `<div>
            <input  v-model="value"> //v-model,加入了一个事件监听,其实就是给组件加入了一个props
        </div>`,
})