最後のセクションでは、我々はについて学んだの概念と目的スロット、および詳細に示された匿名のスロットを使用すること。この号のタスクはslotsという名前です。
名前との違いがわかります。1つは匿名で、もう1つは名前です。
スロットの概念の詳細については説明しませんが、名前付きスロットを直接示します。
<div id="app">
<App></App>
</div>
<script>
Vue.component('MBtn',{
template:`
<button>
<slot name='login'></slot>
<slot name='submit'></slot>
<slot name='register'></slot>
</button>
`
})
const App = {
data () {
return {
title:'老爹'
}
},
template:`
<div>
<MBtn>
<template slot='login'>
<a href="#">登录</a>
</template>
</MBtn>
<m-btn>
<template slot='register'>
注册
</template>
</m-btn>
<MBtn>
<template slot='submit'>
提交
</template>
</MBtn>
</div>
`,
}
new Vue({
el:'#app',
data:{
},
components: {
App
}
});
</script>
名前付きスロットと匿名スロットの主な違いは、スロットタグに名前属性が追加されていることです。
名前のない出口には、暗黙の名前「default」が付けられます。
例では、前号のように、私たちは書いたグローバル部品MBtn実証し、3つのボタンが、提出し、登録し、ログインそれぞれ、と書いた3名の属性を、ログイン、提出、および登録。
次に、いつものように、アプリの部分コンポーネントを作成しました。テンプレートテンプレートは、我々が呼ぶMBtn成分を同時に、テンプレートラベルインサートの内部は、我々はしているラベルの書き込みスロットテンプレートのプロパティ、プロパティ・スロットの値であるスロットを使用する名前。
スロットタグの名前の値と一致する限り、テンプレートのコンテンツはこのスロットに挿入されます
次に、MBtnコンポーネントにテンプレートスロットを書き込む順序がログイン、送信、登録であることに注意してください。Appコンポーネントを呼び出すと、注文はログイン、登録、送信になります。
ページはどのような順序でレンダリングされますか？
注文は、ログイン、登録、送信です。
明らかに、ページレンダリングの順序は呼び出しの順序です。
それは我々が書くとき、と言うことですテンプレートスロットを、スロットの順序が重要なことを呼び出すためで、重要ではありません。
あなたはまだこの詳細に注意を払う必要があります。私はかつて他の人のアカウントでこの問題を見ました。
WeChatミニプログラムコースのデザイン、完全なデザインのニーズがあります。個人のQQに連絡してください：505417246
次のWeChatパブリックアカウントに注意してください。WeChatアプレット、Vue、TypeScript、フロントエンド、ユニアプリ、フルスタック、Nodejs、Python、その他の実用的な学習資料を受け取ることができます。
最新かつ最も完全なフロントエンドの知識の概要とプロジェクトのソースコードは、できるだけ早くWeChatに公開されます。いいえ、ご注意ください。ありがとうございます。
