记录一下组件库第一个发布的的input组件
1.实现双向绑定的方法
说到双向绑定就要先了解Vue中的v-model的实现机制
<input type="text" v-model="value" />
这段代码学习过Vue的小伙伴应该会很熟悉,input
中的值会和value
进行双向绑定,即只要input
中的值改变或者value
值改变都会使另一个值相应改变。
其实v-model
是Vue中的一块语法糖,它还可以这样写:
<input :value="value" @input="value = $event.target.value" />
:value="value"
的意思就是,将input
的值和value
进行绑定,当value
的值改变时,input
中的值也会随之改变。
@input = "value = $event.target.value"
target()
方法返回事件的目标节点,也就是将input
的值传给value
这样就形成了一个双向绑定。
2.在组建中使用
了解了v-model
的原理将它用在组件中
组件:
<template>
<div>
<input
:value="value"
@input="input"
type="text"
>
</div>
</template>
<script>
export default {
data() {
return {
}
},
props:["value"],
methods: {
// 实现v-modle的功能
input(){
this.$emit('input',event.target.value)
}
},
}
</script>
在组件中input
标签的值绑定从父级传来的value
,并且当value
的值改变的时候,input
标签的值也会发生改变,这时@input="input"
起作用了,它将调用methods中的input()
方法,并且触发事件名为input,咦~~,props中传的值为什么叫value,不是通过v-model来传值的吗?,而且触发事件不应该都在父组件中吗?父组件使用它的时候只用了v-model
鸭
再来看看父组件中使用v-model语法糖时,实际是这样的
<zypcInput :value="value" @input="value = $event.target.value" />
这样就解释了为什么props中获取的数据叫做value,以及触发的事件input
3.给组件添加样式
input的基本事件之后更新…loading
<template>
<div>
<input
ref="zypcInput"
@focus="zypcFocusInput"
@blur="zypcBlurInput"
:value="value"
@input="input"
:placeholder="placeholder"
:style="{
backgroundColor:backgroundColor,
width:width,
}"
class="zypc-inputFirst"
type="text">
</div>
</template>
<script>
export default {
data() {
return {
}
},
props:["backgroundColor","placeholder","width","value"],
mounted() {
},
methods: {
// 获得焦点为input标签添加边框
zypcFocusInput(){
this.$refs.zypcInput.style.border = '1px solid rgb(3,169,244)'
},
// 失去焦点将input标签的边框设置为默认值
zypcBlurInput(){
this.$refs.zypcInput.style.border = '1px solid rgb(150,150,150)'
},
// 实现v-modle的功能
input(){
this.$emit('input',event.target.value)
}
},
}
</script>
<style lang="">
.zypc-inputFirst {
border: 1px solid rgb(150, 150, 150);
border-radius: 10px;
outline: none;
padding-left: 5px;
height: 25px;
width: 200px;
margin: 6px;
}
</style>