vue的双向绑定

概念：

vue的双向绑定其实就给一些可输入的元素通过添加input事件在动态的监听某个值

说明：在vue中 v-model 指令自动给组件绑定input事件和传递value属性的值

组件实现双向绑定：
逻辑：一般情况下，vue的数据绑定是单向的，如果说要实现双向绑定，就得涉及到父子、子父间的通讯，父元素的值改变了，告诉子元素，子元素的值改变了，告诉父元素，达到数据双向的响应

用到的知识点：vue的监听watch，以及子父组件的通讯方式之发布订阅模式

<template>
    <!--父组件-->
	<div>
        <Iinput v-model="username"></Iinput>
    </div>
</template>

<script>
	import Iinput from './Iinput.vue'
    export default {
		name:'App',
        data(){
			return {
                username:''
            }
        }
    }
</script>

<template>
    <!--子组件-->
	<div>
        <input :value="" @input="input"/>
    </div>
</template>

<script>
	import Iinput from './Iinput.vue'
    export default {
		name:'App',
        props:{
            //vue内部定义 v-model 属性的值通过value 获取
            value:{
                type:String,
                default:''
            }
        },
        methods:{
            //将子组件输入的值实时更新
            input(e){
				this.itemValue=e.target.value
            }
        },
        data(){
			return {
                itemValue:this.value,//由于vue的props的属性不推荐修改，所以说再子组件这边重新接受一下
            }
        }，
        watch:{
        	//监听props 的value属性，如果说父组件传过来的值改变了，告诉子组件做出相应的改变
        	value(newVal){
                this.itemValue=newVal
            },
            //监听子组件的itemValue属性，如果子组件的itemValue改变了，告诉父组件做出相应改变
            itemValue(newVal){
                //组件内部封装了 ‘input’ 的拦截器，所以说这边只需要派发一下
                //只要用了v-model，就相当于在组建中定义了 this.$on('input',(val)=>{
                //		this[v-model绑定的值]=val
            	//}) 
                this.$emit('input',newVal)
            }
        
    	}
    }
</script>