父组件代码:
<template>
<div id="app">
<!-- 原生v-model -->
<input type="text" v-model="name">
<!-- 利用v-bind和@input实现 -->
<myInput :value1='name' @input1="val=>this.name=val" ></myInput>
</div>
</template>
<script>
import myinput from './views/About.vue';
export default {
data(){
return {
name:'yangxu'
}
},
components:{
myInput:myinput
}
}
</script>
子组件About.vue代码
<template>
<div>
自己的input组件<input type="text" :value='value1' @input='fn'>
</div>
</template>
<script>
export default {
props: ['value1'],
methods: {
fn(e){
this.$emit('input1',e.target.value