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>