指令详解:v-model
v-model其实是一个语法糖,他背后的本质上是包含两个操作
- v-bind绑定一个value属性
- v-on指令给当前元素绑定input事件
之所以用v-bind:value,是为了把父组件的值传给子组件。子组件通过属性props:[‘value’]接收后显示。
之所以用v-on:input=“message = $event”,是父组件接收子组件的值后,再修改message的值。
父组件
<BigInput :value="message" @input="message = $event"></BigInput>
:value="message"是将data中message的值传递给子组件的prop的value。
@input="message = $event"是子组件每次输入新值,会传递给父组件。
子组件:
<template>
<div>
<input type="text" :value="value" @input="handleInput">
</div>
</template>
<script>
export default {
name: "index",
props: ['value'],
methods:{
handleInput(e){
this.$emit('input', e.target.value)
}
}
}
</script>
<style scoped>
</style>
this.$emit(‘input’, e.target.value)是子组件把输入的新value传递给父组件。