ホームページ > 記事 > ウェブフロントエンド > vue スロットはどのような問題を解決しますか?
#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。vue スロットによって解決される問題: 導入されたサブコンポーネント タグの途中にコンテンツを書き込むことはできません。スロットは、コンポーネント パッケージャ用に Vue によって提供される機能です。開発者は、コンポーネントをパッケージ化するときに、ユーザーがスロットとして指定すると予想される不確実な部分を定義できます。スロットは、コンポーネントのパッケージ化中と見なすことができます。ユーザー用に予約されたコンテンツのプレースホルダー。
スロットは実際にはプレースホルダーと同等です。これにより、コンポーネント内で HTML テンプレートに場所が与えられ、いくつかのものを渡すことができるようになります。スロットは、
匿名スロット、名前付きスロット、およびスコープ付きスロットに分割されます。 なぜ HTML をサブコンポーネントに直接記述するのではなく、サブコンポーネントに渡す必要があるのかよく理解できないかもしれません。答えはこれです。 5 ページあるシナリオを想像してみてください。5 ページのうち 1 つの領域だけが異なるコンテンツを持っています。この 5 ページはどのように書きますか?コピー アンド ペーストも 1 つの方法ですが、vue ではスロットの方が優れています。
例:
ファイルディレクトリは次のとおりで、Home コンポーネントが HelloWorld の親コンポーネントです。
HelloWorld に匿名スロットを作成します
<template> <div> Helloworld组件 <div> <slot></slot> </div> </div> </template> <script> export default { } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style> .hello{ width:100%; height:300px; background:#ccc; margin-top:50px; .slotTxt{ width:500px; height:200px; margin:30px auto; background:red; } } </style>
<template> <div> 我是Home父组件 <helloworld> <!-- 没有插槽,这里的内容不显示 --> <h1>我是helloworld中的插槽啊</h1> </helloworld> </div> </template> <script> import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'home', components: { HelloWorld } } </script>
<template> <div> Helloworld组件 <div> <slot></slot> </div> <div> <slot></slot> </div> </div> </template> <script> export default { } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style> .hello{ width:700px; height:300px; background:#ccc; margin: 0 auto; margin-top:50px; .slotLeft{ width:300px; height:200px; float:left; background:red; } .slotRight{ width:300px; height:200px; float:right; background:pink; } } </style>
<template> <div> 我是Home父组件 <helloworld> <template> <h1>name属性为left</h1> </template> <template> <h1>name属性为right</h1> </template> </helloworld> </div> </template> <script> import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'home', components: { HelloWorld } } </script> <style> .home{ width:900px; margin:0 auto; background:yellow; padding-bottom:100px; } </style>
#影響
<template> <div> 我是Home父组件 <helloworld> <h1>name属性为left</h1> <h1>name属性为right</h1> </helloworld> </div> </template> <script> import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'home', components: { HelloWorld } } </script> <style> .home{ width:900px; margin:0 auto; background:yellow; padding-bottom:100px; } </style>効果は上記と同じです。
语法:v-bind:users="user"
サブコンポーネント HelloWorld コード
<template> <div> Helloworld组件 <div> <slot></slot> </div> </div> </template> <script> export default { data(){ return{ user:{ name:'oralinge', age:18 } } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style> .hello{ width:700px; height:300px; background:#ccc; margin: 0 auto; margin-top:50px; .slotLeft{ width:300px; height:200px; // float:left; background:red; margin:20px auto } .slotRight{ width:300px; height:200px; float:right; background:pink; } } </style>要素 (v-bind:users="user") にバインドされたプロパティが、スロット プロパティに対して呼び出されます。これで、親スコープで、v-slot を値とともに使用して、提供するスロット プロパティの名前を定義できるようになりました。
语法:v-slot:default="随意取的名字" // default可省略,简写为v-slot="随意取的名字"
<template> <div> 我是Home父组件 <helloworld> <template> <h1>{{slotProps.users.name}}</h1> </template> </helloworld> </div> </template> <script> import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'home', components: { HelloWorld } } </script> <style> .home{ width:900px; margin:0 auto; background:yellow; padding-bottom:100px; } </style>注:
親コンポーネントのslotPropsは自由に取得できます。
サブコンポーネントのユーザーは、親コンポーネントのユーザーに対応して、任意に選択されます。匿名スロットと同じ、自分だけデフォルトをスロットの名前の値に置き換える必要があります。
サブコンポーネント HelloWorld コード
<template> <div> Helloworld组件 <div> <slot></slot> </div> </div> </template> <script> export default { data(){ return{ user:{ name:'hello world', age:18 } } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style> .hello{ width:700px; height:300px; background:#ccc; margin: 0 auto; margin-top:50px; .slotLeft{ width:300px; height:200px; // float:left; background:red; margin:20px auto } .slotRight{ width:300px; height:200px; float:right; background:pink; } } </style>
親コンポーネント ホームコード
<template> <div> 我是Home父组件 <helloworld> <template> <h1>{{slotProps.users.name}}</h1> </template> </helloworld> </div> </template> <script> import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'home', components: { HelloWorld } } </script> <style> .home{ width:900px; margin:0 auto; background:yellow; padding-bottom:100px; } </style>
注意:
默认插槽的缩写语法不能和具名插槽混用,因为它会导致作用域不明确。
另,slot-scope写法在2.6之后已废弃,作用与上面相同,在此不做解释。
上面的写法是不是觉得有些麻烦?别着急,我们来看一看解构插槽 Prop。
解构插槽 Prop
作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里:
function (slotProps) { // 插槽内容 }
这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式。所以在支持的环境下 (单文件组件或现代浏览器),你也可以使用 ES2015 解构来传入具体的插槽 prop。
语法:v-slot="{ users }"
<template> <div> Helloworld组件 <div> <slot></slot> </div> </div> </template> <script> export default { data(){ return{ user:{ name:'hello world', age:18 } } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style> .hello{ width:700px; height:300px; background:#ccc; margin: 0 auto; margin-top:50px; .slotLeft{ width:300px; height:200px; // float:left; background:red; margin:20px auto } .slotRight{ width:300px; height:200px; float:right; background:pink; } } </style>
<template> <div> 我是Home父组件 <helloworld> <template> <h1>{{users.name}}</h1> </template> </helloworld> </div> </template> <script> import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'home', components: { HelloWorld } } </script> <style> .home{ width:900px; margin:0 auto; background:yellow; padding-bottom:100px; } </style>
效果
<template> <div> 我是Home父组件 <helloworld> <template> <h1>{{person.name}}</h1> </template> </helloworld> </div> </template> <script> import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'home', components: { HelloWorld } } </script> <style> .home{ width:900px; margin:0 auto; background:yellow; padding-bottom:100px; } </style>
效果如上图。
<template> <div> 我是Home父组件 <helloworld> <template> <h1>{{users.name}}</h1> </template> </helloworld> </div> </template> <script> import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'home', components: { HelloWorld } } </script> <style> .home{ width:900px; margin:0 auto; background:yellow; padding-bottom:100px; } </style>
<template> <div> <div> <span>{{title}}</span> <div> <slot></slot> </div> </div> <div> <slot></slot> </div> </div> </template> <script> export default { data () { return { } }, props: { title: { type: String, required: true } } } </script> <style> .title-box { padding: 16px 0; border-bottom: 1px solid #eff1f5; .title { font-family: MicrosoftYaHei; font-size: 24px; color: #283039; letter-spacing: 0; line-height: 24px; &::before { width: 4px; margin-right: 20px; content: ""; background-color: #5da1ff; display: inline-block; height: 20px; vertical-align: middle; } } .right { float: right; margin-right: 20px; } } </style>
使用的ui框架为ivew。
相关推荐:vue.js视频教程
以上がvue スロットはどのような問題を解決しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。