vue が v-model を実装する方法を詳しく説明した記事 (コード例付き)-Vue.js-php.cn

vue が v-model を実装する方法を詳しく説明した記事 (コード例付き)

藏色散人

リリース： 2023-01-06 21:26:21

転載

3529 人が閲覧しました

この記事では、vue に関する関連知識を提供します。主に、なぜ v-model を使用するのかについて説明します。 vue を使って v-model を実装する方法について興味がある方は見てみましょう。

v-model を使用する理由 v-model は、双方向バインディング命令として、vue の 2 つのコア機能の 1 つでもあり、非常に使いやすく、フロントエンド開発の効率を向上させます。ビュー層では、モデル層は相互にデータをやり取りする必要があるため、v-model を使用できます。
v-modelの原理を簡単に説明します

v-modelは主に2つの機能を提供しており、ビュー層の入力値がデータの属性値に影響を与えます。データ属性の値が変更されると、ビューが更新され、レイヤーの値が変更されます。

核心は、一方では、モーダルレイヤーがdefinePropertyを通じて各属性をハイジャックし、変更が検出されると、関連するページ要素を通じて更新されるということです。一方、テンプレートファイルをコンパイルすると、入力イベントがコントロールの v-model にバインドされるため、ページ入力は関連するデータ属性値をリアルタイムで更新できます。

v-modelとは v-model は Vue の双方向バインディング命令です。ページ上のコントロールによって入力された値を、関連するバインドされたデータ属性に同期的に更新できます。また、データバインディング属性が変更されている場合、ページ上の入力コントロールの値も更新します。更新しました。

vue2.0実装メソッド

親コンポーネント

<template>
  <div id="app">
    {{username}} <br/>
    <my-input type="text" v-model="username"></my-input>
  </div>
</template>
 
<script>
import myinput from &#39;./components/myinput&#39;
export default {
  name: &#39;App&#39;,
  components:{
      myinput
  },
  data(){
    return {
      username:&#39;&#39;
    }
  }
 
}
</script>

ログイン後にコピー

myinput.vue：

<template>
    <div class="my-input">
        <input type="text" class="my-input__inner" @input="handleInput"/>
    </div>
</template>
 
<script>
    export default {
        name: "myinput",
        props:{
            value:{ //获取父组件的数据value
                type:String,
                default:&#39;&#39;
            }
        },
        methods:{
            handleInput(e){
                this.$emit(&#39;input&#39;,e.target.value) //触发父组件的input事件
            }
        }
    }
</script>

ログイン後にコピー

最も一般的なのは、モーダルボックスの表示と閉じるを制御することです。v-model を使用して、例として要素の el-dialog コンポーネントを取ることもできます

<template>
    <div>
        <kmDialog
            v-model="showDialog"
        >
        <el-button @click="show">点我</el-button>
    </div>
</template>
<script>
    import kmDialog from &#39;KmDialog.vue&#39;
    export default {
        components: {
            KmDialog
        }
        data () {
            return {
                showDialog: false
            }
        },
        methods: {
            show() {
                this.showDialog = true
            }
        }
    }
</script>

ログイン後にコピー

<template>
    <el-dialog
        :title="isEdit ? &#39;编辑设备&#39; : &#39;新增设备&#39;"
        :visible.sync="value"
        width="40%"
        @close="cancel"
      >
        <span>这是一段信息</span>
    </el-dialog>
</template>
<script>
    export default {
        props: {
            value: {
                default: false,
                type: Boolean
            }
        },
        methods: {
            cancel() {
                this.$emit(&#39;input&#39;, false)
            }
        }
    }
</script>