vue双向数据绑定 | 易学教程

vue双向数据绑定v-model的实现原理

定义组件com-one如下

<template>    <div>      <input type="text" @input = 'handlinput' :value="value">    </div></template><script>     export default {       props :['value'],          name: "com-one",       methods : {         handlinput(e){this.$emit('input',e.target.value)           console.log(e.target.value)         }       }     }

script>子组件自定义事件input自定义方法handlinput，在方法中$emit事件input,同时从父组件中获取变量value绑定到组件input中，

父组件监听子组件的发射的事件input,在data中定义value给子组件传递过去因为子组件通过$emit发射的事件传递一个参数因此监听的等于argments[0],这样当父组件中输入值子组件也会同时变化值这可以在vue-tool中看到，因此可以在父组件中可以用v-model来使用使用如下v-model="value"代替:value = value @input="value = arguments[0]"这样实现了父组件监听子组件的输入情况

在父组件helloword中引入

  import comone from './com-one'

<comone :value = value @input="value = arguments[0]"></comone>

<comone v-model="value"></comone>

export default {    components : {      comone    },  data () {    return {      value:'123',    }  }}</script>也可以自定义model还和上面一样这里定义了model对象model :{prop :'value1',event :'change'},让从父组件中由原来的value变成定义的vaule1,将原来定义的事件input更改为change事件这样也可以实现刚才的mocdel

<template>    <div>      <input type="text" @input = 'handlinput' :value="value1">    </div></template><script>     export default {       model :{prop :'value1',         event :'change',       },       props :['value1'],          name: "com-one",       methods : {         handlinput(e){this.$emit('change',e.target.value)           console.log(e.target.value)         }       }     }</script>

来源：https://www.cnblogs.com/zhx119/p/10145817.html

标签

input

vue

target