初級はこちら！
v-slot
分割代入
簡単にいうと別の場所で
別の変数をきめれて
値を代入できること💡
MDN分割代入
というより見た方が早いですね👀
親で子の値を使えちゃいます！
どんな時に使うの？
まとまったdataを子で管理したい時に使います！
コード
) components
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<template> <div class="title title-page"> <slot v-bind:user="user"> {{ user.lastName }} </slot> </div> </template> <script> export default { data () { return { user: { firstName: 'first', lastName: 'last', }, } }, } </script> |
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<template> <div class="page"> <Text> <template #default="sample"> {{ sample.user.firstName }} </template> </Text> </div> </template> <script> import Text from '~/components/Text.vue' export default { components: { Text, }, data () { return { } }, } </script> |
動的なスロット名
動的引数
まずは動的引数を理解しましょう💡
https://jp.vuejs.org/v2/guide/syntax.html#動的引数
解説
<a :[attributeName]="url"> リンク </a>
これと全く同じです❗️
<a :href="url">リンク</a>
コード
) components
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<template> <a :[attributeName]="url"> リンク </a> </template> <script> export default { data () { return { attributeName: "href", url: "/" } }, } </script> |
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<template> <div class="page"> <Link /> </div> </template> <script> import Link from '~/components/Link.vue' export default { components: { Link, }, } </script> |
v-bind="$attrs"
では今度はslotで…
できるのですが、
簡単な方法があります！笑
解説
属性自体を親から渡したい時
v-bind="$attrs"を使います💡
今回の場合はaタグの
href属性ごと渡してます。
コード
) components
|
1 2 3 4 5 6 7 8 |
<template> <a v-bind="$attrs">リンク</a> </template> <script> export default { } </script> |
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<template> <div class="page"> <Link href="/" /> </div> </template> <script> import Link from '~/components/Link.vue' export default { components: { Link, }, } </script> |
まとめ
置き換えのできる3つをまとめました！
- slot：テキストの置き換え
- props：それ以外の置き換え、クラス付与などに便利
- v-bind="$attrs"：属性自体の置き換え