大家好，欢迎来到IT知识分享网。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>vue基础扩展8--solt详解</title>
</head>
<body>
<!---
一、旧的插槽
概述：插槽是什么？ 顾明思意就是，在组件内定义了一个占位符，可以用来拿到组件包裹的内容进行渲染。
或者说我们在使用组件时，在组件内填写的元素会在组件内部定义的solt标记渲染。
1、旧的api
方式1： 组件内<solt></solt>, 使用：组件标签包裹内容即solt内容。
方式2: 组件内<solt name="xx"><solt>， 使用：包裹内容内： <element solt="xx"> <element>
方式3： 组件内<solt :todo="todo">，使用：在方式2基础上通过<template slot-scope="scope"> scope.todo 传递绑定的属性
-->
<!--2、旧的api综合使用案例-->
<div id="app">
<slot2 :msg="msg">
<div slot="head">我是头</div>
<div slot-scope="scope">我是默认:{
{scope.msg}}</div>
<div slot="foot">我是尾</div>
</slot2>
</div>
<script>
var vm = new Vue({
el:'#app',
data() {
return {
msg:'hello world！'
}
},
components:{
slot2:{
props: ['msg'],
template:`<div>
<slot name="head"></slot>
<slot :msg="msg"></slot>
<slot name="foot"></slot>
</div>`
}
}
});
</script>
<!--
3、 新的api方式
组件内模板定义solt的方式不变， solt变成v-solt
方式2 ：<element v-solt:xx> </element> 或者 <element #xx> </element>
方式3 ：<element v-solt="slotProps"> </element> 或者 <element #default="slotProps"> </element>
-->
<!--
4、改写范例
-->
<div id="app1">
<slot2 :msg="msg">
<template #head><div>我是头</div></template>
<template #default="scope"><div>我是默认:{
{scope.msg}}</div></template>
<template #foot><div>我是尾</div></template>
</slot2>
</div>
<script>
var vm = new Vue({
el:'#app1',
data() {
return {
msg:'hello world！'
}
},
components:{
slot2:{
props: ['msg'],
template:`<div>
<slot name="head"></slot>
<slot :msg="msg"></slot>
<slot name="foot"></slot>
</div>`
}
}
});
</script>
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/26514.html
