ホームページ > 記事 > ウェブフロントエンド > Vue スコープ スロットの使用方法の詳細な説明
Vue スコープ スロットの使用方法の詳細な説明
- php中世界最好的语言オリジナル
- 2018-04-19 09:38:482568ブラウズ
今回は、Vue スコープ スロットの使用について詳しく説明します。Vue スコープ スロットを使用する際の 注意事項 について、実際のケースを見てみましょう。
たとえば、私はストライプを実現できるリストグループウェアを作成しました。公開した後、ユーザーは各行のコンテンツやスタイルをカスタマイズできます(通常のスロットでこの作業を完了できます)。スロットのスコープの重要な点は、親コンポーネントが子コンポーネントのスロットから渡されたパラメーターを受け取ることができることです。詳細については、ケースと notes を参照してください。
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vue作用域插槽</title>
<scriptsrc="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
<pid="app2">
<my-stripe-list:items="users"odd-bgcolor="#D3DCE6"even-bgcolor="#E5E9F2">
<!-- props对象接收来自子组件slot的$index参数 -->
<templateslot="cont"scope="props">
<span>{{users[props.$index].id}}</span>
<span>{{users[props.$index].name}}</span>
<span>{{users[props.$index].age}}</span>
<!-- 这里可以自定[编辑][删除]按钮的链接和样式 -->
<a:href="'#edit/id/'+users[props.$index].id"rel="external nofollow">编辑</a>
<a:href="'#del/id/'+users[props.$index].id"rel="external nofollow">删除</a>
</template>
</my-stripe-list>
</p>
<script>
Vue.component('my-stripe-list', {
/*slot的$index可以传递到父组件中*/
template: `
<p>
<pv-for="(item, index) in items"style="line-height:2.2;":style="index % 2 === 0 ? 'background:'+oddBgcolor : 'background:'+evenBgcolor">
<slotname="cont":$index="index"></slot>
</p>
</p>
`,
props: {
items: Array,
oddBgcolor: String,
evenBgcolor: String
}
});
new Vue({
el: '#app2',
data: {
users: [
{id: 1, name: '张三', age: 20},
{id: 2, name: '李四', age: 22},
{id: 3, name: '王五', age: 27},
{id: 4, name: '张龙', age: 27},
{id: 5, name: '赵虎', age: 27}
]
}
});
</script>
</body>
</html>
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
jS は一定の速度で画像のフェードインとフェードアウトを実装します
JS はデータ検証とチェックボックスフォームの送信を実装します
以上がVue スコープ スロットの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。