en el modelo
v-modelEn realidad, es un azúcar sintáctico, la unión valueeventos, escuche el inputcaso. v-modelEl valor por defecto será valueatributo pasó a los sub-componentes, y supervisará inputel evento, de dos vías de enlace de datos
index.vue
<template>
<div>
<k-input v-model="msg"></k-input>
// v-model就是下面用发的语法糖
// <k-input :value="msg" @input="msg=$event"></k-input>
{{ msg }}
</div>
</template>
<script>
import KInput from './KInput'
export default {
name: 'kModel',
components: {
KInput
},
data () {
return {
msg: 'this is message'
}
}
}
</script>
<style lang="scss" scoped></style>
k-input.vue
<template>
<div>
<input type="text" :value="value" @input="inputHandle">
</div>
</template>
<script>
export default {
name: 'kInput',
model: {
prop: 'value',
event: 'input'
},
props: {
value: {
type: String,
default: ''
}
},
methods: {
inputHandle (e) {
this.$emit('input', e.target.value)
}
}
}
</script>
<style lang="scss" scoped>
</style>
representaciones
.sync
distribución subcomponente update:msg, los padres monitor de componente@update:msg
index.vue
<template>
<div>
// <k-input :msg="msg" @update:msg="(message) => { msg = message }"></k-input>
// 下面是语法糖用法
<k-input :msg.sync="msg"></k-input>
{{ msg }}
</div>
</template>
<script>
import KInput from './KInput'
export default {
name: 'kModel',
components: {
KInput
},
data () {
return {
msg: 'this is message'
}
}
}
</script>
<style lang="scss" scoped></style>
k-entrada
<template>
<div>
<input type="text" :value="msg" @input="inputHandle">
</div>
</template>
<script>
export default {
name: 'kInput',
props: {
msg: {
type: String,
default: ''
}
},
methods: {
inputHandle (e) {
this.$emit('update:msg', e.target.value)
}
}
}
</script>
<style lang="scss" scoped>
</style>
Personalizados componentes el-radio para lograr
Imitación
element-uide lograr la implementación de los componentes de la EL-Radio
index.vue
<template>
<div>
<k-radio-group v-model="gender">
<k-radio label="男性"></k-radio>
<k-radio label="女性"></k-radio>
</k-radio-group>
<hr />
{{ gender }}
</div>
</template>
<script>
import KRadioGroup from './KRadioGroup'
import KRadio from './KRadio'
export default {
name: 'kModel',
components: {
KRadioGroup,
KRadio
},
data () {
return {
gender: '女性'
}
}
}
</script>
<style lang="scss" scoped></style>
k-radio-grupo
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'kRadioGroup',
model: {
prop: 'value',
event: 'input'
},
props: {
value: {
type: String
}
},
mounted () {
this.$on('change', (value) => {
this.$emit('input', value)
})
}
}
</script>
<style lang="scss" scoped>
</style>
la radio
<template>
<div>
<label>
{{ label }}
<input name="gender" :value="label" :checked="isChecked" type="radio" @change="changeHandle" />
</label>
</div>
</template>
<script>
export default {
name: 'kRadio',
props: {
label: {
type: String
}
},
methods: {
changeHandle (e) {
this.$parent.$emit('change', e.target.value)
}
},
computed: {
isChecked () {
return this.$parent.value === this.label
}
}
}
</script>
<style lang="scss" scoped></style>
representaciones
