Vue 的插槽感觉上是一个组件函数，和函数一样进行参数的传递来改变组件的据题内容。
使用指令：v-slot
//插口的基本使用
<body>
<div id="app">
<!-- 传入元素参数 -->
<login><span>demo</span></login>
</div>
</body>
<template id="login">
<div>
<!-- slot就是将插口，可以将元素参数存放到插口中 其中H3标签元素就是默认参数-->
<slot><h3>heee</h3></slot>
</div>
</template>
<script>
const login = {
template:"#login"
}
new Vue({
el:"#app",
components:{
login
}
})
</script>
当要有多个插口时，各个插口是如何分辨插口的内容的。
<body>
<div id="app">
<!-- 传入元素参数 -->
<login> //必须通过template进行包裹 使用v-slot命令进行具名分析
<template v-slot:name1>
<span >demo1</span>
</template>
<template v-slot:name2>
<span>demo2</span>
</template>
<template v-slot:name3>
<span >demo3</span>
</template>
</login>
</div>
</body>
<template id="login">
<div>
<!-- slot就是将插口，可以将元素参数存放到插口中 其中H3标签元素就是默认参数-->
<slot name="name1"><h3>插口1</h3></slot>
<slot name="name2"><h3>插口2</h3></slot>
<slot name="name3"><h3>插口3</h3></slot>
</div>
</template>
<script>
const login = {
template:"#login"
}
new Vue({
el:"#app",
components:{
login
}
})
</script>//感觉上和命名视图相类似的使用
// 编译作用域
<navigation-link url="/profile">
Clicking here will send you to: {{ url }}
<!--
这里的 `url` 会是 undefined，因为 "/profile" 是
_传递给_ <navigation-link> 的而不是
在 <navigation-link> 组件*内部*定义的。
-->
在template元素中使用的属性只能在tempalte中 外部是无法访问到的。
</navigation-link>
//父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
//子组件的数据显示样式改变 不是默认的显示模式
<body>
<div id="app">
<!-- 传入元素参数 -->
<login>
<!-- 绑定的数据是将上就是子组件中的数据 但是 只是可以改变数据的输出样式 也就是父组件替换插槽的标签 内容还是由子组件提供 -->
<template v-slot:default="slotProps">
----{{slotProps.user.uel}}
</template>
</login>
</div>
</body>
<template id="login">
<div>
<!-- slot就是将插口，可以将元素参数存放到插口中 其中H3标签元素就是默认参数-->
<slot v-bind:user="user">{{user.name}}</slot>
</div>
</template>
<script>
const login = {
template:"#login",
data:function(){
return {
user:{
name:"xiaoming",
uel:"ddd"
}
}
}
}
new Vue({
el:"#app",
data:{
},
components:{
login
}
})
</script>
原文地址：https://www.cnblogs.com/panjingshuang/p/11984500.html
时间： 2024-08-30 14:46:33