vue v-model原理实现,以及实现组件之间的双向绑定

v-model原理

	如input:利用oninput事件监听input内容的变化,利用$event.target.value获取
	实时内容,然后传递给组件中的变量,同时,input标签上利用v-bind又将value动态绑定值改变量,实现双向绑定

按v-model原理实现子组件中的input和父组件双向绑定

	(1)将子组件中的input监听@input事件,事件的回调函数利用$emit将input内容发送给父组件,
	同时将input的value值动态绑定成子组件中父组件传入的变量
	
		<input type="text" :value='info' @input="$emit('fromChild',$event.target.value)"/>
		 props:['info'],
	(2)父组件定义函数接收子组件的$emit发送的内容,将发送的内容,传入变量,然后又将变量
	传递给子组件,使得父组件能修改子组件的变量,子组件也能修改父组件的变量
	
		<A :info='msg' @fromChild='get'/>

简化写法:
	在父组件中子组件上定义的接收子组件$emit函数
	
		@emit键名='双向绑定的变量=$event' ;
		因为事件可以放表达式,且此处$event默认为$event.target.value
		
使用v-model进行组件双向绑定
(1)在父组件的子组件上
	v-model='双向绑定变量'
(2)在子组件中
	props:['任意名称接收改变量']
	将双向绑定的元素值动态绑定改变量,同时向父组件发送$emit,@事件名="$emit('事件名',$event.target.xx)"
	详情查看官网:
	深入了解组件->自定义事件->自定义组件的v-model

代码示例:
按原理实现:
子组件:

<template>
  <div>

      <input type="text" :value='info' @input="$emit('fromChild',$event.target.value)"/>

  </div>
</template>

<script>
 export default{
   name:'A',
   data(){
     return{

     }
   },
   props:['info'],
   methods:{

   }
 }
</script>

<style>
</style>

父组件:

<template>
  <div id="app">

      <A :info='msg' @fromChild='get'/>
      <A :info='msg' @fromChild='msg=$event'/>
      {{msg}}

  </div>
</template>

<script>
import A from './components/A'
export default {
  name: 'App',
  data()
  {
    return{
        msg:'父组件'
     }
  },
  methods:{
      get:function(data)
      {
          this.msg=data;
      }
  },
  components:{
    A
  }
}
</script>

<style scoped>

</style>