Vue表单元素双向绑定

1. v-model 详解

​ v-model本质上是一个语法糖。 应用在输入框上 就是value属性和input事件的合写

//v-model 应用于input上
<template>
    <div>

        <input v-model='msg1' type='text' />
        //在输入框内输入内容 输入框的value改变 触发input事件 将输入框的新value值传回msg2中
        <input :value='msg2' @input='msg = $event.target.value' type='text' />
    </div>
</template>

<script>
    export default {
        data(){
          return {
              msg1:'',
              msg2:''
          }  
        },
        methods: {
            changed(){
                Bus.$emit('sendMsg','今日晴天 适合郊游')
            }
        },
    }
</script>`

2. 使用v-model完成父子组件的数据传递

​ 父组件使用v-model的前提为 子组件内已经配置好了相应的input事件 和v-bind属性

<template>
    <div>
        <Son :citiId = 'selectId' @change = 'selecteId = $event'></Son>
        //本质上为
        //<Son :citiId = 'selectId' @input = 'selecteId = $event'></Son>
        //<Son v-model='selectId'></Son>
        
        
        
    </div>
</template>

<script>
    export default {
        import Son from ''
        components:{
        	Son
    	},
        data(){
          return {
              selectId:'102'
          }  
        },
        methods: {
            
        },
    }
</script>

Son组件

<template>
    <div>
        
        <select :value='value' @changed = 'handleChange'>
            <option value='101'>南京</option>
            <option value='102'>上海</option>
            <option value='103'>北京</option>
            <option value='104'>武汉</option>
            <option value='105'>深圳</option>
        </select>
    </div>
</template>

<script>
    export default {
        props:{
          //v-model中默认绑定属性为value 所以在接收数据时固定为value值  
          value:String
        },
        methods: {
            changed(e){
        //父组件配置v-model v-model实质上是触发@input事件 所以传输数据时key值应该为input  
                this.$emit('input',e.target.value)
            }
        },
    }
</script>

.sync修饰符进行双向绑定

<template>
    <div>
        <Son :citiId.sync = 'selectId' @change = 'selecteId = $event'></Son>
        //本质上为   通过.sync绑定的属性  在子组件中通过props接收时 属性名不用固定为value
        //仅事件名固定为 @update
        //<Son :citiId = 'selectId' @update = 'selecteId = $event'></Son>
        //<Son v-model='selectId'></Son>
        
        
        
    </div>
</template>

<script>
    export default {
        import Son from ''
        components:{
        	Son
    	},
        data(){
          return {
              selectId:'102'
          }  
        },
        methods: {
            
        },
    }
</script>