v-slot注意すべき詳細
51754 ワード
slot(2.6.0+は廃棄されたが除去されなかった)はノード に解析する.同名スロットには、複数のコンテンツ が用意されています.同名スロットは複数回使用可能(v-slot;2.6.0-1回のみ使用可能) コンテンツを提供するノードは、そのコンポーネントの1つのサブノードでなければならない.2次ノードがコンテンツを提供すると、スロットのコンテンツ(v-slot)とはみなされない.また、通常ラベルは通常ノードで解析されます.コンテンツラベルは解析する . slotは、サブコンポーネントに直接作用することができるが、親コンポーネント(異なるv-slot) に作用することはできない.
v-slot(2.6.0+v 3.0以降これに変更) v-slotは、 コンポーネントまたはカスタムコンポーネントにのみ追加できます. slotは2.6.0+で廃棄され、v-slotはslotと衝突し、同名のv-slotはslotの内容 を上書きします.同名スロットは複数のコンテンツを提供することができず、後者は前者の をカバーする.同名スロットは複数回使用可能(slotと同じ) template.v-slotはノードを解析しません(slot.slotと似ています).ノードを解析するには、解析可能なサブノード を使用することができる.は、そのコンポーネントの1つのサブノードである必要があります.二次ノードがコンテンツを提供すると、スロットコンテンツと見なされず(slot;templateラベルコンテンツは解析されず、コンポーネントは検証されていない)、 とエラーが報告されます. v-slot:defaultはデフォルトのスロットの内容を定義できます.slot=「default」はできないか、まったくこの使い方がない(どうせ廃棄された内容だ) v-slotは親コンポーネントに直接作用することができるが、サブコンポーネント(異なるslot)に作用することはできない.あるいは[サブアセンブリ+v-slot]は親アセンブリのスロットとして解読されず、サブアセンブリ自身のスロット である. v-slotはサブアセンブリ(c 3)に直接作用してはならない.親コンポーネントにのみ使用できます.この例では、c 1ができないスロットをc 3独自のスロットとして使用できます.また、c 3には1つのスロット しかないことを前提としています.
上の内容が読めなくても大丈夫です.コードを実行するコードはゆっくりと模索します.
end
v-slot(2.6.0+v 3.0以降これに変更)
上の内容が読めなくても大丈夫です.コードを実行するコードはゆっくりと模索します.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>slot title>
<style>
.outline,
.outline * {
outline: 1px solid red;
margin: 0;
padding: 10px 7px;
}
.slot__default,
.slot__default * {
outline: 1px solid green;
}
style>
head>
<body>
<div id="swq">
<swq>swq>
div>
<script type="text/x-template" id="swq-template">
<div class="outline">
<c1>
<!--txt.oSlot1-->
<div slot="oSlot1">div.oSlot1 </div>
<!--txt.oSlot2-->
<slot slot="oSlot2">slot.oSlot2 <slot> </slot>
<!--txt.oSlot3-->
<slot slot="oSlot3">slot.oSlot3-1; </slot>
<slot slot="oSlot3">slot.oSlot3-2 </slot>
<!--txt.oSlot4-->
<div slot="oSlot4">div.oSlot4 ( v-slot; 2.6.0- )</div>
<!--txt.oSlot5-->
<!--<slot slot="oSlot5">div.oSlot5 </slot>-->
<!--txt.oSlot6-->
<slot slot="oSlot6">slot.oSlot6 , ; , ( v-slot)</slot>
<div>
<div slot="oSlot6">div.oSlot6 , ; <slot> </div>
<slot slot="oSlot6">slot.oSlot6 </slot>
</div>
<!--txt.oSlot7-->
<c3 slot="oSlot7">c3.oSlot7 slot , ( v-slot)</c3>
<!------------ slot v-slot ------------>
<!--txt.vSlot1-->
<template v-slot:vSlot1>template.v-slot1 2.6.0+ ;v-slot <template> </template>
<!--txt.vSlot2-->
<template v-slot:vSlot2>template.v-slot2 slot 2.6.0+ , v-slot slot , v-slot slot </template>
<slot slot="vSlot2">slot.vSlot2 </slot>
<!--txt.vSlot3-->
<template v-slot:vSlot3>template.v-slot3-1 </template>
<template v-slot:vSlot3>template.v-slot3-2 v-slot , </template>
<!--txt.vSlot4-->
<template v-slot:vSlot4>
<div>template.v-slot4 ( slot)</div>
</template>
<!--txt.vSlot5-->
<template v-slot:vSlot5>
<div>template.v-slot5 template.v-slot ( slot.slot ); , <template> </div>
</template>
<!--txt.vSlot6-->
<!--<template v-slot:vSlot6>template.v-slot6 </template>-->
<!--txt.vSlot7-->
<div>
template.v-slot7
<!--<template v-slot:vSlot7>template.v-slot7 </template>-->
</div>
<!--txt.vSlot8-->
<template v-slot:vSlot8="vSlot8">template.v-slot8 {{ vSlot8.user.firstName }}</template>
<!--txt.vSlot9-->
<template v-slot:vSlot9>
<c3>c3.v-vSlot9 v-slot , ( slot); [ + v-slot] , </c3>
</template>
</c1>
<c2>
<!--<slot slot="default">slot.default</slot>-->
<template v-slot:default>v-slot:default ; slot="default" , ( )</template>
</c2>
<c3 v-slot:vSlot9>c3.v-vSlot9 v-slot (c3) ; , c1 , c3 , c3 </c3>
</div>
script>
<script type="text/x-template" id="c1-template">
<div class="c1">
<div>
<slot name="oSlot1"></slot>
</div>
<div>
<slot name="oSlot2"></slot>
</div>
<div>
<slot name="oSlot3"></slot>
</div>
<div>
<slot name="oSlot4"></slot>
<slot name="oSlot4"></slot>
</div>
<div>
<slot name="oSlot5">div.oSlot5 [ ]</slot>
</div>
<div>
<slot name="oSlot6"></slot>
</div>
<div>
<slot name="oSlot7"></slot>
</div>
<div>---------- slot v-slot ----------</div>
<div>
<slot name="vSlot1"></slot>
</div>
<div>
<slot name="vSlot2"></slot>
</div>
<div>
<slot name="vSlot3"></slot>
</div>
<div>
<slot name="vSlot4"></slot>
<slot name="vSlot4"></slot>
</div>
<div>
<slot name="vSlot5"></slot>
</div>
<div>
<slot name="vSlot6">template.v-slot6 [ ]</slot>
</div>
<div>
<slot name="vSlot7">template.v-slot7 ; , ( slot; template , ), </slot>
</div>
<div>
<slot name="vSlot8" v-bind:user="user">{{ user.lastName }}</slot>
</div>
<div>
<slot name="vSlot9"></slot>
</div>
<div class="slot__default">
<div>
<slot></slot>
</div>
</div>
<div>c1 end</div>
</div>
script>
<script type="text/x-template" id="c2-template">
<div>
<slot name="default"></slot>
</div>
script>
<script type="text/x-template" id="c3-template">
<div>
<slot name="vSlot9" v-if="$slots.vSlot9"></slot>
<slot name="default" v-else=""></slot>
</div>
script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js">script>
<script type="text/javascript">
var c1 = {
template: "#c1-template",
data() {
return {
user: {
firstName: "firstName c1",
lastName: "lastName c1"
}
};
},
mounted() {
console.log("c1")
console.log(this.$slots)
},
}
var c2 = {
template: "#c2-template",
mounted() {
console.log("c2")
console.log(this.$slots)
},
}
var c3 = {
template: "#c3-template",
mounted() {
console.log("c3")
console.log(this.$slots)
},
}
var swq = {
template: "#swq-template",
data: function() {
return {
user: {
firstName: "firstName swq",
lastName: "lastName swq"
}
}
},
components: {
c1,
c2,
c3,
},
};
var vu = new Vue({
el: "#swq",
components: {
swq: swq,
},
})
script>
body>
html>
end