Input组件-实现双向绑定以及相关样式（Vue-UI组件库）

记录一下组件库第一个发布的的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>