父子组件数据的双向绑定
答:假设是子组件是type为text的input标签
1.父组件v-model传值,子组件props的value属性接收,v-bind绑定表单元素的value,然后v-on:input=‘ e m i t ( ′ i n p u t ′ , emit('input', emit(′input′,event.target.value)’
解释:为什么$emit传的是input,因为父组件v-model默认绑定的事件是Input
2.父组件使用v-bind时添加sync修饰符,子组件通过$emit(‘update:key名’,值)的形式通知父组件的修改
//父
<template>
<div>
<h1>测试页面</h1>
<Input v-model="msg"></Input>
</div>
</template>
<script>
import Input from "./components/Input.vue";
export default {
data() {
return {
msg:0
};
},
methods: {},
components: {
Input,
},
};
</script>
//子
<template>
<div>
<input type="text" :value="value" @input="$emit('input',$event.target.value)"/>
</div>
</template>
<script>
export default {
props: ["value"],
};
</script>