vue slotスロットの詳細
27173 ワード
スロットの意味:サブアセンブリを導入した後、サブアセンブリ要素に情報またはラベルを追加し、サブアセンブリの指定された位置に情報を挿入するか、ラベルスロットにvue 2のため、デフォルトスロット、名前付きスロット、役割ドメインスロットの3種類がある.6.0以降はスロットを変更しますが、2.6.0以前のバージョンと互換性があり、博文では2.6.0後のスロット、vue 3のみを説明しています.0以降では、2.60以前のバージョン互換性1、デフォルトスロットが削除されます.
二、名前付きスロット:サブアセンブリに複数のスロットがあり、スロットに名前を指定することで一対一の対応を実現する.
三、役割ドメインスロット:サブコンポーネントdataのデータまたはサブコンポーネントpropsのデータを親コンポーネントのスロットに転送する1)2つの属性を1つのv-slot:スロット名='転送された値'に統合します.
2)コンポーネントページにおけるslotの内容は変化していない.
3)v-slotはhtmlラベルには使用できません.
4)デフォルトスロットの場合は、v-slot="xxx"と書くことができます.
5)また、デフォルト値を設定したスロットを復元することができるpropsも追加されました.具体的には、公式サイトのスロットを復元することができます.には、ダイナミックスロット名とダイナミックスロット名が追加されています.概ね動的命令パラメータはv-slotにも用いることができ、これは2.6.0に追加された動的パラメータ に及ぶ.
このattrContentはJavaScript式として動的に評価され、求めた値は最終的なパラメータとして使用されます.たとえば、attrContentの最終値がdefaultの場合、v-slot:default=‘msg’がレンダリングされます.
注意:
1)式は[]四角カッコのみでも使用できますが、引用符やスペースは使用できません.
2)もちろん,この動的値はメソッド,属性,あるいはdataデータの内容を計算することができる.重要なのは、このダイナミックな値がコンポーネントを参照する役割ドメインであることです.簡単に言えば、親コンポーネントの役割ドメインです.
たとえば、v-slot:sayWhat="thing"は次のように書くことができます.
1)v-slot:[first+sec]=[thing]プラス記号の両側にスペースを残すことはできません
2) v-slot:[attr]=‘thing’
3) v-slot:[attrs]=‘thing’
4) v-slot:[getattr()]=‘thing’
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> </title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{
{
message}}
<tode-item> <h3> h3</h3></tode-item>
</div>
</body>
<script type="text/javascript">
//
Vue.component('tode-item', {
template: `
slot // ， ， ， 。
`
});
var app = new Vue({
el: "#app",
data: {
message: 'hello world!'
}
});
</script>
</html>
二、名前付きスロット:サブアセンブリに複数のスロットがあり、スロットに名前を指定することで一対一の対応を実現する.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> </title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
2.60 v-slot
<my-component>
<template v-slot:first>nihao</template>
<template v-slot:last>hi</template>
</my-component>
<!-- v-slot: # -->
<my-component>
<template #first>nihao</template>
<template #last>hi</template>
</my-component>
</div>
</body>
<script type="text/javascript">
Vue.component('my-component',{
template: `
`
})
let app = new Vue({
el: "#app",
data: {
}
})
</script>
</html>
三、役割ドメインスロット:サブコンポーネントdataのデータまたはサブコンポーネントpropsのデータを親コンポーネントのスロットに転送する1)2つの属性を1つのv-slot:スロット名='転送された値'に統合します.
2)コンポーネントページにおけるslotの内容は変化していない.
3)v-slotはhtmlラベルには使用できません.
4)デフォルトスロットの場合は、v-slot="xxx"と書くことができます.
5)また、デフォルト値を設定したスロットを復元することができるpropsも追加されました.具体的には、公式サイトのスロットを復元することができます.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> </title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- <script type="text/javascript" src="vue.js"></script> -->
</head>
<body>
<div id="app">
<my-component :message='msg'>
<!-- val ， -->
<template v-slot:listbox='val'>
<p>{
{
val.send.text}}</p>
</template>
<!-- thing ， -->
<div slot='sayWhat' slot-scope='thing'> 2.60 ：{
{
thing.said}}</div>
<!-- slot ， slot ， slot ： ， ？ ， 。 -->
<!--
<div v-slot:sayWhat='thing'> ：{
{
thing.said}}</div> -->
<!--
<template v-slot:sayWhat='thing'>
{
{
thing.said}}
</template> -->
</my-component>
</div>
</body>
<script type="text/javascript">
Vue.component('my-component',{
template: `
`,
props:['message'],
data(){
return {
list:[
{
"id":10,
"text":" "
},{
"id":20,
"text":" "
},{
"id":30,
"text":" "
},{
"id":40,
"text":" "
},
]
}
}
})
let app = new Vue({
el: "#app",
data: {
msg: ' slot ',
}
})
</script>
</html>
<template v-slot:[attrContent]='msg'>
xxx
</template>
このattrContentはJavaScript式として動的に評価され、求めた値は最終的なパラメータとして使用されます.たとえば、attrContentの最終値がdefaultの場合、v-slot:default=‘msg’がレンダリングされます.
注意:
1)式は[]四角カッコのみでも使用できますが、引用符やスペースは使用できません.
2)もちろん,この動的値はメソッド,属性,あるいはdataデータの内容を計算することができる.重要なのは、このダイナミックな値がコンポーネントを参照する役割ドメインであることです.簡単に言えば、親コンポーネントの役割ドメインです.
たとえば、v-slot:sayWhat="thing"は次のように書くことができます.
1)v-slot:[first+sec]=[thing]プラス記号の両側にスペースを残すことはできません
2) v-slot:[attr]=‘thing’
3) v-slot:[attrs]=‘thing’
4) v-slot:[getattr()]=‘thing’
export default{
data () {
return {
msg: ' slot ',
attr:'sayWhat',
first:'say',
sec:'What',
}
},
components:{
slotScope },
computed:{
attrs:function(){
return 'sayWhat'
}
},
methods:{
getattr(){
return 'sayWhat'
}
}
}