这里总结两点
<李>如果不在子组件中使用插槽(槽),那么在子组件中写任何代码都是无效的的,不会显示李
<李>(插槽默认值)如果子组件中没有插入任何代码的话就会显示组件插槽中的内容李
& lt; p> Dell
& lt; child>
& lt; p> Dell
& lt;/child>
之前
这里如果是这样的
& lt; child>& lt;/child>之前
就会显示& lt; slot>默认内容& lt;/slot>中的默认内容,
1,如果不在子组件中使用插槽(槽),那么在子组件中写任何代码都是无效的的,不会显示
2,(插槽默认值)如果子组件中没有插入任何代码的话就会显示组件插槽中的内容
这里如果是这样的
& lt; child>& lt;/child>之前
就会显示& lt; slot>默认内容& lt;/slot>中的,默认内容
3,聚类插槽
子组件这么写:
模板:“& lt; div>
& lt; slot>默认内容& lt;/slot>
& lt; p> content
& lt; slot>默认内容& lt;/slot>
& lt;/div>
然后这么引用:
& lt; child>
& lt; div> header
& lt; div> footer
& lt;/child>
就会发现结果是
头
页脚
内容
头
,页脚
这个不是我的本意,那么怎么办,这里就引入了聚类插槽
子组件:
模板:“& lt; div>
& lt;槽name='标题'在默认内容& lt;/slot>
& lt; p> content
& lt;槽的名字=耙辰拧痹谀夏谌? lt;/slot>
& lt;/div>
子组件引用:
& lt; child>
& lt; div槽='标题'祝辞header
& lt; div槽=耙辰拧弊４莊ooter
& lt;/child>
不难发现给每个想要指定的子组件插槽添加名字属性,然后在引用中槽中明确是哪个即可也可以理解为引用中是用了两个插槽同时,默认内容同时适用在每个插槽
这个是普通插槽的演示
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Vue中使用插槽(槽)& lt;/title>
& lt;脚本src=" https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js”祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=案北?
& lt; !
1,如果不在子组件中使用插槽(槽),那么在子组件中写任何代码都是无效的的,不会显示
2,(插槽默认值)如果子组件中没有插入任何代码的话就会显示组件插槽中的内容
这里如果是这样的
& lt; child>
& lt;/child>
就会显示& lt; slot>默认内容& lt;/slot>中的
默认内容
——比;
& lt; child>
& lt; p> Dell
& lt;/child>
& lt;/div>
& lt;脚本type=" text/javascript祝辞
Vue.component(‘孩子’,{/*
槽代表父组件往子组件中插入的标签
这里就代表组件子组件中的& lt; p> Dell
& lt; child>
& lt; p> Dell
& lt;/child>
*/模板:“& lt; div>
& lt; slot>默认内容& lt;/slot>
& lt;/div>
}）;
var vm=new Vue ({
埃尔:“#根”,
}）;
& 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.jsdelivr.net/npm/vue@2.5.17/dist/vue.js”祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=案北?
& lt; !
1,如果不在子组件中使用插槽(槽),那么在子组件中写任何代码都是无效的的,不会显示
2,(插槽默认值)如果子组件中没有插入任何代码的话就会显示组件插槽中的内容
这里如果是这样的
& lt; child>
& lt;/child>
就会显示& lt; slot>默认内容& lt;/slot>中的
默认内容
3、聚类插槽
子组件这么写:
模板:“& lt; div>
& lt; slot>默认内容& lt;/slot>
& lt; p> content
