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>