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

逃离我推掉我的手 2021-07-24 11:18 270阅读 0赞

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>