我们都知道父子组件通信有很多方法,v-model就是其中一种,v-model可以实现数据双向绑定,
v-model就是v-bind 和@input事件的语法糖 意思就是 v-bind:value 和 v-on:input的合成
下面给大家看vue2.0版本的v-model实现父子组件通信的代码,以便大家理解
父组件中
父组件中使用v-model来绑定
//父组件
<template>
<div>
<my-input v-model="title"></my-input>
</div>
</template>
<script>
import myInput from "@/components/myInput";
export default {
data() {
return {
title: "123",
};
},
components: {
myInput
},
methods: {
},
};
</script>
子组件中
子组件中通过props接受,并设置v-on:input (@input)事件和v-bind:value (:value)
@input事件就是监听事件通过输入值的变化来触发
//子组件
<template>
<div>
<input type="text" @input="change" :value="value">
</div>
<