in the model
v-modelIt is actually a syntactic sugar, binding valueevents, listen for inputthe event. v-modelThe default will valueattribute passed to the sub-components, and will monitor inputthe event, two-way data binding
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>
Renderings
.sync
Sub-component distribution update:msg, parent component monitor@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-input
<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>
Custom el-radio components to achieve
Imitation
element-uiachieve implementation of the components of the 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-group
<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>
to the 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>
Renderings
