この記事では、数値キーボード コンポーネントを例として、主に Vue のパブリック コンポーネントを抽象化する方法を紹介します。興味のある方は参考にしていただければ幸いです。
私は抽象的な Vue コンポーネントについてのエッセイを書きたいと常に思っていましたが、良い例が思いつきませんでした。たまたま最近、会社のプロジェクトで数値キーボード コンポーネントを作成したので、これを例として Vue コンポーネントを抽象化する方法について説明しました。
まず、デモとソースコードにアクセスしてください。 (デモはモバイル モードのブラウザで表示するのが最適です)
具体的な実装について話す前に、理想的なパブリック コンポーネントがどのようなものであるかについて私が考えるものを共有したいと思います。
1. ブラック ボックス、つまり自分自身を除く。さらに、他の開発者は、内部実装について心配することなく、使用法ドキュメントをすぐに読んですぐに始めることができます
2. 独立性、つまり、親コンポーネントとの関係を過度に持たないこと。カスタマイズのために一部の入力インターフェイスまたはメソッドを外部に公開し、外部から入力されない場合にはこれらのプロパティのデフォルト値を設定します。
まずブラック ボックスを使用して、デモ内の数値キーボード コンポーネントがどのように呼び出されるかを確認してみましょう (コードの重要でない部分は省略されています)。
App.vue
<template>
......
<keyboard @submit-event='handleSubmit' @change-event='handleChange'></keyboard>
</template>
<script>
import keyboard from 'Keyboard.vue';
export default {
data() {
return {
value: ''
};
},
methods: {
handleChange(value, currentValue) {
console.log(value, currentValue);
this.value = value;
},
handleSubmit() {
console.log('submit: ' + this.value);
}
}
}
</script>ログイン後にコピー
以上で、最も基本的な呼び出しが完了しました。効果は次のとおりです:
その後、1〜6をクリックして「OK」をクリックします。次のようになっている場合:
次に、数字キーボード コンポーネントのすべての入力項目を分析します。
@change-event: このイベントはカスタム イベントです。親コンポーネントは v-on を通じてリッスンするように登録され、子コンポーネントは $emit を通じて内部的にトリガーされます (カスタム イベントの詳細については、Vue 公式チュートリアルを参照してください)。 ）。
このイベントは、数字ボタンとバックスペース キーをクリックするたびにトリガーされ、value、累積されたクリックされた文字の組み合わせ、currentValue、現在クリックされている文字の 2 つのパラメーターを渡します。親コンポーネントは、handleChange メソッドを通じてこのイベントのコールバック コンテンツを受け取ります。
@submit-event: このイベントは、「OK」ボタンがクリックされたときにトリガーされます。パラメーターは渡されず、親コンポーネントに「OK ボタンがクリックされたことを通知します。何をするかは自分で決定できます。クリックする前に」この番号は変更イベントを通じてあなたに渡されました。」親コンポーネントは、handleSubmit メソッドを通じてコールバックを受け取ります。
これら 2 つのメソッドだけを書くのはあまりにも不誠実です。いくつかのシナリオに基づいて次のカスタム属性も書きました。
max: 最大入力長。デフォルトでは、超過した長さは変更イベントをトリガーしません。
<keyboard max='6'></keyboard>
ログイン後にコピー
sp-key: ID カードを入力するときに「X」などのカスタマイズされた特殊文字が左下隅の空白スペースに追加されます。デフォルトはなしです。
<keyboard sp-key='X'></keyboard>
ログイン後にコピー
random: 銀行口座やパスワードを入力するときによく見られる、番号の順序を乱すかどうか。デフォルトは false です。
<keyboard random='true'></keyboard>
ログイン後にコピー
上記のカスタムプロパティとイベントから、親コンポーネントがどのように子コンポーネントに値を渡し、子コンポーネントの変更を監視するのかがおおよそわかりますが、親コンポーネントはどのようにして子コンポーネント内の関数を直接呼び出すのでしょうか？成分？ ？次のシーンを見てみましょう。
数字キーボードのキーボードアイコンをクリックすると、数字キーボードが非表示になります。コンポーネント内には、キーボードのポップアップと格納を制御するためのメソッドkeyboardToggle(true|false)があります。では、このメソッドをコンポーネントの外でも呼び出したい場合はどうすればよいでしょうか。たとえば、親コンポーネントの入力がフォーカスを取得したときなどです。
次のように、Vue の ref 属性を通じてキーボードのコンポーネント参照を取得し、その内部メソッドを呼び出すことができます:
$refs.[refName].keyboardToggle(true|false)
<template>
<input type='text' @focus='handleShowKeyboard($event)' />
<keyboard ref='kbref'></keyboard>
</template>
<script>
import keyboard from 'Keyboard';
export default {
//...
methods: {
handleShowKeyboard(e) {
e && e.preventDefault();
this.$refs.kbref.keyboardToggle(true);
}
}
}
</script>ログイン後にコピー
上記のフォームでは、親コンポーネントのコンテキストで子コンポーネントのメソッドを呼び出すことができます。
$refs.[refName].handleInit()
数値キーボードコンポーネント内の初期化メソッド。コンポーネントを再レンダリングするために使用されます。ランダム プロパティが true の場合、数字キーはランダムな配置を更新します。
$refs.[refName].handleClear()
以前に入力された文字の組み合わせをクリアし、change-eventをトリガーし、空の文字列を返します。
このコンポーネントのすべての外部プロパティとイベントは上で共有されていますが、コンポーネント内のコード行はまだ見ていませんが、内部実装についてはすでに完全に使用できます。
まず、キーボードを左右の部分に分割しました。言うまでもなく、右側の部分は v-for ループによって生成されたキーのビット配列です。
それでは、0 と 9 の間のスペースを空にする方法を見てみましょう。キーボード コンポーネントを初期化する方法を見てみましょう。
keyboard.vue
handleInit()
<template>
<p>
<p class='kb-left'>
<p class='kb-item' v-for='item in keyArr'>{{item}}</p>
<p class='kb-item kb-toggle'></p> //键盘图标
</p>
<p class='kb-right'>
//...
</p>
</p>
</template>
<script>
export default {
data() {
return {
baseArr: []
}
},
computed: {
keyArr() {
this.handleInit();
return this.baseArr;
}
},
methods: {
handleInit() {
this.baseArr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
this.baseArr.splice(this.baseArr.length - 1, 0, '');
}
}
}
</script>ログイン後にコピー
は、キー配列の最後から2番目の位置にnull文字を挿入し、ループでキーを生成します。カスタムパラメータがどのように影響するかを見てみましょう。
spキー
<script>
export default {
props: ['spKey'],
data() {
return {
baseArr: []
}
},
//....
methods: {
handleInit() {
let spKey = this.spKey;
this.baseArr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
this.baseArr.splice(this.baseArr.length - 1, 0, spKey);
}
}
}
</script>ログイン後にコピー
在组件内部通过 props 属性接收父组件传递的 spKey，之后就可在组件内的属性和方法中通过 this.spKey 进行访问。首先判断 spKey 值是否有效，并代替空字符插入键位数组倒数第二项。
random
<script>
export default {
props: ['spKey', 'random'],
data() {
return {
baseArr: []
}
},
//....
methods: {
handleInit() {
let spKey = this.spKey;
this.baseArr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
if (this.random && this.random != 'false') {
this.baseArr.sort(function() {
return Math.random() - Math.random();
});
}
this.baseArr.splice(this.baseArr.length - 1, 0, spKey);
}
}
}
</script>ログイン後にコピー
将键位打乱顺序其实也很简单，只要通过数组的 sort 方法。sort 方法可以接收一个函数作为参数，若函数返回正数则交换前后两项的位置，若函数返回负数则不作交换。所以将两个随机数相减的结果返回，即可将键位数组随机排序。
下面看看在组件内部是如何触发 change-event 的。
handleInput()
<template>
<p>
<p class='kb-left'>
<p @click='handleInput(item)' class='kb-item' v-for='item in keyArr'>{{item}}</p>
<p class='kb-item kb-toggle'></p> //键盘图标
</p>
//...
</p>
</template>
<script>
export default {
data() {
return {
inputStr: ''
}
},
//...
methods: {
handleInput(value) {
this.inputStr += value;
this.$emit('change-event', this.inputStr, value);
}
}
}
</script>ログイン後にコピー
增加了 max 属性后修改方法如下：
handleInput(value) {
let max = Number(this.max);
if (!isNaN(max) && this.inputStr.length+1 > max) {
return;
}
this.inputStr += value;
this.$emit('change-event', this.inputStr, value);
}ログイン後にコピー
最后看看退格删除是如何实现的。
handleDelete()
handleDelete() {
let str = this.inputStr;
if (!str.length) return;
this.inputStr = str.substring(0, str.length - 1);
this.$emit('change-event', this.inputStr);
}ログイン後にコピー
上面的例子都是些核心代码的片段，并且其他辅助函数并未列出，想查看完整的代码请看源码。
相关推荐：
微信小程序公共组件的封装制作方式
Vue组件之Tooltip实例详解
Vue高阶组件的使用方法
以上が抽象的な Vue パブリック コンポーネントの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
