コードワードは簡単ではなく、役立つ学生は私のWeChat公式アカウントに注意を払うことを望んでいます：コードプログラムライフ、ありがとう！
開発Webフロントエンド、という考え方コンポーネント化とモジュール化は、現在の技術開発を実施してきました。
コンポーネントの重要な機能の1つは再利用性です。コンポーネントをカプセル化した後、複数の開発を必要とせずに、どこでもコンポーネントを再利用できます。ことわざにあるように、1つのパッケージが何度も使用されます。
ただし、実際には、コンポーネント間で再利用できる機能はたくさんあります。
簡単な例として、プロンプトボックスコンポーネントとモーダルボックスコンポーネントを見てみましょう。表示形式は異なりますが、トリガーメカニズムは基本的に同じで、トリガー条件の出現によりv-ifの値を変更し、コンポーネントの表示を実現します。
そこにされているものの、他の言葉では、論理的に繰り返される機能を、その2つの構成要素の間に、それらをすることができ、再利用することにより、我々の開発効率を向上させることができます。
VUEは、一連の提供＆再利用可能な成分の混合技術怠惰Aのミックスインを。
再利用は元々「怠惰」であり、効果的な操作に重点を置き、無効な操作を最小限に抑えるため、なぜそれが怠惰なテクノロジーと呼ばれるのですか。
Mixinは、Vueコンポーネントで再利用可能な関数を配布するための非常に柔軟な方法を提供します。ミックスインオブジェクトには、任意のコンポーネントオプションを含めることができます。コンポーネントがブレンドオブジェクトを使用する場合、ブレンドオブジェクトのすべてのオプションがコンポーネント自体のオプションに「ブレンド」されます。
まず、mixinの使用法を示す小さな例を示しましょう。
<div id="app">
{
{
msg}}
</div>
<script>
const myMixin = {
data () {
return {
msg:123
}
},
created () {
this.sayHello();
},
methods: {
sayHello(){
console.log('hello mixin');
}
}
}
new Vue({
el:'#app',
data:{
title:'Ray'
},
mixins: [myMixin],
});
</script>
私たちは書いたローカルコンポーネントmyMixinを。インスタンス化VUEでは、私たちが書いたデータと同じレベルでミックスインの属性を、と置く名前のローカルコンポーネント我々は、以前の形式で書いた配列を。ここでは、複数のコンポーネントをミックスインに入れることができることもわかります。つまり、再利用したい任意のコンポーネントを入れることができます。
次に、ページのレンダリングを確認します。myMixinのメソッドとフック関数を
正常に実行しました。
これは、mixinの最も基本的な使用法です。
ここでは実際のケースの開発があり、実際の開発でミックスインがどのように使用されるかを示しています。
const toggleShow = {
data () {
return {
isShow:false
}
},
methods: {
toggleShow(){
console.log("点击！");
this.isShow = !this.isShow;
}
}
}
const Model = {
template:`
<div v-if='isShow'>
<h3>模态框组件</h3>
</div>
`,
// 局部的mixin
mixins: [toggleShow]
}
const Toast = {
template:`
<div v-if='isShow'>
<h2>提示框组件</h2>
</div>
`,
// 局部的mixin
mixins: [toggleShow]
}
new Vue({
el:'#app',
data:{
},
components: {
Model,
Toast
},
template:`
<div>
<button @click='handleModel'>模态框</button>
<button @click='handleToast'>提示框</button>
<Model ref='model'></Model>
<Toast ref='toast'></Toast>
</div>
`,
methods:{
handleModel(){
this.$refs.model.toggleShow();
},
handleToast(){
this.$refs.toast.toggleShow();
}
}
});
</script>
今そこにあるモーダルボックスなど一部のコンポーネントモデル、およびプロンプトボックスなど一部のコンポーネントトースト。
それらは異なって見え、それらの使用法は異なりますが、ロジックは同じです、それらは両方ともv-ifのブール値を切り替えるためのものです。
次に、部分コンポーネントtoggleShowを作成しました。このコンポーネントは、繰り返し再利用したコンポーネントであり、モーダルボックスとプロンプトボックスに必要なロジック関数を提供するために使用されます。
そして、この再利用されたコンポーネントをミックスインで呼び出します：ModelとToastの両方で[toggleShow]。
次に、インスタンス化されたvueでこれら2つのコンポーネントを使用し、それらをref属性でバインドして、toggleShowメソッドを呼び出して表示効果を実現します。
ページの実際のレンダリングを見てみましょう。ボタン
をクリックすると、モーダルボックスとプロンプトボックスが対応する表示を完了します。問題はありません。
我々は、から実現toggleShow成分に剥離機能、分布のモデルとトースト効果コンポーネント。
だとミックスイン当社で開発した実用的な作品の使用には、非常に使いやすいまだ、構成要素とすることができる機能を再利用することができ、続け引っ張っアウトと配布に必要なコンポーネントに。
WeChatミニプログラムコースのデザイン、完全なデザインのニーズがあります。個人のQQに連絡してください：505417246
次のWeChatパブリックアカウントに注意してください。WeChatアプレット、Vue、TypeScript、フロントエンド、ユニアプリ、フルスタック、Nodejs、Python、その他の実用的な学習資料を受け取ることができます。
最新かつ最も完全なフロントエンドの知識の概要とプロジェクトのソースコードは、できるだけ早くWeChatに公開されます。いいえ、ご注意ください。ありがとうございます。
