本文实例讲述了vue使用插槽分发内容操作。分享给大家供大家参考,具体如下:
除非子组件模板包含至少一个,& lt; slot>,插口,否则父组件的内容将会被<强>丢弃强。当子组件模板只有一个没有属性的插槽时,父组件传入的整个内容片段将插入到插槽所在DOM的位置,并替换掉插槽标签本身。
最初在,& lt; slot>,标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示<强>备用内容。
例:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Vue测试实例——单个插槽& lt;/title>
& lt;脚本src=" https://cdn.bootcss.com/vue/2.2.2/vue.min.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=袄印北?
& lt; div>
& lt; h2>我是父组件的标题& lt;/h2>
& lt; my-component>
& lt; p>这是一些初始内容& lt;/p>
& lt; p>这是更多的初始内容& lt;/p>
& lt;/my-component>
& lt;/div>
& lt;/div>
var childNode={//当没有& lt; slot>时,父组件的其他内容不会显示,当有& lt; slot>时,要是父组件中的内容不为空,& lt; slot>//中的内容就不会显示
模板:
& lt; div>
& lt; h3>我是子组件的标题& lt;/h3>
& lt; slot>
只有在没有要分发的内容时才会显示。
& lt;/slot>
& lt;/div>
”,
}；//创建根实例
新Vue ({
埃尔:“#例子”,
组件:{
“组件”:childNode
}
}）
& lt;/script>
& lt;/body>
& lt;/html>
之前
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Vue测试实例——具名插槽& lt;/title>
& lt;脚本src=" https://cdn.bootcss.com/vue/2.2.2/vue.min.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=袄印北?
& lt; app-layout>
& lt; h2槽="头"在这里可能是一个页面标题& lt;/h2>
& lt; p>主要内容的一个段落。;/p>
& lt; p>另一个主要段落。;/p>
& lt; p槽=耙辰拧痹谡饫镉幸恍┝敌畔? lt;/p>
& lt;/app-layout>
& lt;/div>
& lt; script>
Vue.component (app-layout, {
模板:' & lt; div类=叭萜鳌痹凇?
+ & lt; header>
& lt;槽名称="头"祝辞& lt;/slot>“+
+ & lt;/header>
+ & lt; main>
“& lt; slot> & lt;/slot>“+
+ & lt;/main>
+ & lt; footer>
& lt;槽的名字=耙辰拧弊４? lt;/slot>“+
+ & lt;/footer>
“& lt;/div>”
}）//创建根实例
新Vue ({
埃尔:“#例子”,
}）
& lt;/script>
& lt;/body>
& lt;/html>
之前
& lt; div类=昂⒆印北?
& lt;槽文本=从孩子“你好”祝辞& lt;/slot>
& lt;/div>
之前
在父级中,具有特殊特性,slot-scope 的,& lt; template>,元素必须存在,表示它是作用域插槽的模板.slot-scope 的值将被用作一个临时变量名,此变量接收从子组件传递过来的道具对象:
<强>在2.5.0 + slot-scope 能被用在任意元素或组件中而不再局限于,& lt; template>。
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Vue测试实例——作用域插槽& lt;/title>
& lt;脚本src=" https://cdn.bootcss.com/vue/2.2.2/vue.min.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=袄印北?
& lt; parent-com> & lt;/parent-com>
& lt;/div>
& lt; script>
Vue.component (child-com, {
模板:" +
+ & lt; ul>
& lt;槽name=" child-ul " v=毕钅吭诙铩皏-bind:文本=癷tem.name祝辞& lt;/slot>“+
“& lt;/ul>”
数据:函数(){
返回{
动物:[
{名称:“大象},
{名字:“小狗”},
{名字:“小猫”},
{名称:“老虎”}
］
}
}
});//父组件//在父组件的模板里,使用一个Vue自带的特殊组件& lt; template>，//并在该组件上使用范围属性,值是一个临时的变量,存着的是由子组件传过来的//道具对象,在下面的例子中我把他命名为道具。//获得由子传过来的道具对象。这时候,父组件就可以访问子组件在自定义属性上暴露的数据了。
Vue.component (parent-com, {
模板:" +
' & lt; div类=叭萜鳌痹凇?
“& lt; p>动物列表& lt;/p>“+
+ & lt; child-com>
& lt;模板范围="道具"槽=癱hild-ul”在“+
李的& lt;类=" child-ul "在{{道具。文本}}& lt;/li>“+
+ & lt;/template>
+ & lt;/child-com>
“& lt;/div>”
});//创建根实例
新Vue ({
埃尔:“#例子”,
}）
& lt;/script>
& lt;/body>
& lt;/html>
