vue.js は、データ駆動型の Web インターフェイスを構築するためのライブラリです。 Vue.js の目標は、可能な限りシンプルな API を使用して、応答性の高いデータ バインディングと合成ビュー コンポーネントを有効にすることです。以下の記事では、vue プロジェクトにおける v-model 親コンポーネントと子コンポーネントの通信実装に関する関連情報を中心に紹介します。必要な方は参考にしてください。
前書き
私たちの vue プロジェクトでは、親コンポーネントが v-model をバインドし、子コンポーネントの入力が親コンポーネントの v-model にバインドされた値を変更することがよくあります。多くの友人はこの操作についてあまり理解していませんが、これには v モデルについてのより深い理解が必要です。今日は v モデルについて話しましょう。
vue の双方向データバインディング
v-model コマンドは、、
この質問は多くのフロントエンドインタビューで言及されるでしょう。インタビュアーは、Vue における双方向データ バインディングの原理は何ですかと尋ねました。もちろん、これもよくある質問で、Baidu で検索するとどこでも答えが見つかります。
一般に、Object.defineProperty() はデータの取得と設定を監視してデータ ハイジャックを実現するために使用されていることがわかります。
Object.defineProperty() についてあまり知らない場合は、上のリンクをクリックして構文を確認してください。
簡単な例:
var blog = { name: 'haorooms博客' }; console.log(blog.name); // haorooms博客
を実行したい場合に便利です。コードは次のとおりです: console.log(blog.name)
的同时,直接给haorooms博客加个书名号,那要怎么处理呢?或者说要通过什么监听对象 blog的属性值。这时候Object.defineProperty( )
var blog= {} var name = ''; Object.defineProperty(blog, 'name', { set: function (value) { name = value; console.log('欢迎来到' + value); }, get: function () { return '《' + name + '》' } }) blog.name = 'haorooms博客'; // 欢迎来到haorooms博客 console.log(blog.name); // 《haorooms博客》
v-model の使用法
上記で散々述べてきましたが、実際には、Vue は単一のデータ フローであり、v-model は単なる構文糖であることを説明するためです。 。<input v-model="haorooms" /> <input v-bind:value="haorooms" v-on:input="haorooms= $event.target.value" />
<input :value="haorooms" @input="haorooms= $event.target.value" />
<input v-model="haorooms" />
<input :value="haorooms" @input="haorooms= $event.target.value" />
Using v-model onComponents
元の質問に戻りますか? v-model は vue の親コンポーネントと子コンポーネントの間でどのように通信しますか?コンポーネントでどのように使用するのでしょうか?上記の例を理解していれば、コンポーネントで v-model を簡単に使用できます。 親コンポーネントのコードは次のとおりです:<template> <p id="demo"> <test-model v-model="haorooms"></test-model> <span>{{haorooms}}</span> </p> </template> <script> import testModel from 'src/components/testModel' export default { data(){ return{ haorooms: "haorooms" } }, components: { testModel, } } </script> <style lang="scss" scoped> </style>
<template> <span> <input ref="input" :value="value" @input="$emit('balabala', $event.target.value)" > </span> </template> <script> export default { data(){ return{ } }, props: ["value"], model: { prop: 'value', event: 'balabala' } } </script> <style lang="scss" scoped> </style>
v-modelの欠点と解決策
チェックボックスやラジオボタンなどの一般的なコンポーネントを作成する場合、v-modelは使いにくいです。<input type="checkbox" v-model="haorooms" />
<input type="checkbox" :checked="status" @change="status = $event.target.checked" />
<my-checkbox v-model="haorooms"></my-checkbox>
<input type="checkbox" <!--这里就不用 input 了,而是 balabala--> @change="$emit('balabala', $event.target.checked)" :checked="value" /> export default { data(){ return{ } }, props: ['checked'], //这里就不用 value 了,而是 checked model: { prop: 'checked', event: 'balabala' }, }
JavaScriptを使用してカスタムイベントメカニズムを実装する方法
JavaScriptを使用して2次元の週間ビューカレンダーを開発する方法
以上がvue で v-model を使用して親子コンポーネント通信を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。