前号では、コンポーネントに関するさまざまな知識について説明しました。
次にスロットコンテンツを学びます。スロットはコンテンツVueコンポーネントベースの開発を拡張することです。
公式ドキュメントでは、スロットの役割について説明しています。vueに実装されたコンテンツを配布するための一連のAPIであり、コンテンツを運ぶためのエクスポートとしてスロット要素を使用します。
平易な言葉で表現するには：コンポーネントタグに新しいコンテンツを追加する場合は、コンポーネントでスロット要素を宣言する必要があります。そうしないと、追加された新しいコンテンツはレンダリングされません。
通常、さまざまな一般的な機能を個別にVueにカプセル化して後で再利用しますが、再利用が必要なコンポーネントが完全に適合しない場合もあります。現時点では、スロットを使用する必要があります。スロットを使用すると、ユーザーはコンポーネントを拡張して、より適切に実現できます。コンポーネントの再利用。
次に、簡単な例を使用して匿名スロットを実装します。
今、ビジネスシナリオを想像します。現在、ログインと登録のページに取り組んでいます。ログインと登録のページには多くのボタンがあります。コンポーネントを開発するとき、以前のようにコンポーネントを開発すると、どのような問題が発生しますか？
ログイン用と登録用の2つのボタンを作成し、コンポーネント化された開発を行う必要がある場合、それらの基本的なコンテンツ構造は非常に似ています。2つのコンポーネントを開発する必要がありますか？
明らかに、それは大きすぎて、コンポーネント開発の本来の意図に反します。
この時点でスロットが使用されます。
<div id="app">
<App></App>
</div>
<script>
Vue.component('MBtn',{
template:`
<button>
<slot></slot>
</button>
`
})
const App = {
data () {
return {
title:'老爹'
}
},
template:`
<div>
<MBtn><a href="#">登录</a></MBtn>
<MBtn>注册</MBtn>
</div>
`,
}
new Vue({
el:'#app',
data:{
},
components: {
App
}
});
</script>
私たちは、書いたグローバルなコンポーネントMBtnボタンです。
テンプレートでは、特に注意が必要な点が1つあります。シンプルなボタンタグに、匿名スロットであるスロットタグを記述しました。
次に、このMBtnグローバルボタンコンポーネントをローカルコンポーネントアプリで使用します。
スロットの利点は何ですか？
このコンポーネントを使用するときに、必要なものをこのコンポーネント内に書き込むことができます。
これは、スロットがないかのように、以前に登録とログインについて述べたものであり、JSを使用しないレベルでこの問題を直接解決する方法はありません。
見てみましょうコンテンツ内のテンプレートテンプレートのアプリケーション部分のコンポーネントを。私たちは、使用しているこのMBtnコンポーネント倍で、その我々が望むものは何でも巣を書くことができます。
このように、登録ボタンとログインボタンを別々に開発するには、1つのコンポーネントを使用するだけで済みます。
とても便利ですか？
1ページに多数のボタンがある場合があります。スロットを使用しない場合、使用するコンテンツを任意にネストすることはできません。これは非常に厳格です。
実際、スロットは、私がそこに場所を残し、何を置くかをまだ決めていませんが、最初にそれを占有し、何かを置きたいと思うのを待って、いつでもそれを置く必要があると簡単に理解できます。
スロットにはさまざまな種類があります。この号では、匿名スロットのコンテンツを一時的に理解し、その後のコンテンツは引き続き更新されます。
WeChatミニプログラムコースのデザイン、完全なデザインのニーズがあります。個人のQQに連絡してください：505417246
次のWeChatパブリックアカウントに注意してください。WeChatアプレット、Vue、TypeScript、フロントエンド、ユニアプリ、フルスタック、Nodejs、Python、その他の実用的な学習資料を受け取ることができます。
最新かつ最も完全なフロントエンドの知識の概要とプロジェクトのソースコードは、できるだけ早くWeChatに公開されます。いいえ、ご注意ください。ありがとうございます。
