一、v-model原理
原理:v-model本质上是一个语法糖。例如在inpu中,就是value属性和input事件的合写
作用:提供数据的双向绑定
双向绑定
一、v-model原理
原理:v-model本质上是一个语法糖。例如在inpu中,就是value属性和input事件的合写
作用:提供数据的双向绑定
双向绑定:数据变,视图跟着变;视图变,数据跟着变
二、表单类组件封装&v-model简化代码
1.表单组件封装的核心思路:
(1)父传子 : 数据从父组件使用prop传递给子组件渲染,子组件使用v-model拆解绑定数据
(2)子传父:监听输入方法,子传父传值给父组件修改
<template> <div class="app"> <BaseSelect :cityId="selectId" @changeSelect="selectId = $event"></BaseSelect> </div> </template> <script> import BaseSelect from './components/BaseSelect.vue'; export default { name: 'App', components: { BaseSelect }, data(){ return { selectId : '103' } }, methods : { } } </script> <style> </style>
<template> <div> <select :value="cityId" @change="changeCity"> <option v-for="item in list" :key="item.value" :value="item.value"> {{ item.name }} </option> </select> </div> </template> <script> export default { props : { cityId : String }, data(){ return { list : [ { value : '101', name : '北京' }, { value : '102', name : '上海' }, { value : '103', name : '南京' }, { value : '104', name : '广州' } ] } }, methods : { changeCity(e){ // console.log(e) this.$emit('changeSelect',e.target.value) } } } </script> <style> </style>
2.简化代码
(1)子组件:prop通过value接收,事件触发使用@input
(2)父组件:v-model直接绑定数据
<template> <div class="app"> <!-- v-model == :value + @input --> <BaseSelect v-model="selectId"></BaseSelect> </div> </template> <script> import BaseSelect from './components/BaseSelect.vue'; export default { name: 'App', components: { BaseSelect }, data(){ return { selectId : '103' } }, methods : { } } </script> <style> </style>
<template> <div> <select :value="value" @change="changeCity"> <option v-for="item in list" :key="item.value" :value="item.value"> {{ item.name }} </option> </select> </div> </template> <script> export default { props : { value : String }, data(){ return { list : [ { value : '101', name : '北京' }, { value : '102', name : '上海' }, { value : '103', name : '南京' }, { value : '104', name : '广州' } ] } }, methods : { changeCity(e){ // console.log(e) this.$emit('input',e.target.value) } } } </script> <style> </style>