slot插槽
当组件中某一项需要单独定义，那么就应该使用solt
Vue 实现了一套内容分发的 API，将
元素作为承载分发内容的出口。
单个slot（匿名插槽）
除非子组件模板包含至少一个
插口，否则父组件的内容将会被丢弃 ,当子组件模板只有一个没有属性的 slot 时，父组件整个内容片段将插入到 slot 所在的 DOM 位置，并替换掉 slot 标签本身。
- 如果希望, 能够让组件中的部分, 使用时进行定制, 需要用到插槽
- 默认, 如果组件使用时, 组件标签中添加的内容, 不进行处理, 将被忽略
- slot 插槽, 作用: 分发内容
- 在组件使用时, 添加的内容, 将来会被分发到 slot 标签的位置去, 可以实现组件的定制
在组件的模版中定义slot插槽
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document
title> <style> .com1 {
width: 300px; padding: 20px; border-radius: 10px; background-color: salmon; border: 2px solid black; }
style>
head> <body> <div id="app"> <com1> <p>发生未知错误，是否继续??
p>
com1> <com1> <p>你确认要退出系统么??
p>
com1>
div> <script src="./lib/">
script> <script> // 没有给
警告
具名插槽
- 给插槽起一个名字
- 用 template 标签, 将需要分发的内容进行包裹,通过设置 v-slot:插槽名, 实现分发到指定的插槽
Vue.component("modal", {
template: `
<modal> <template v-slot:header> <h3>警告
h3>
template> <template v-slot:content> <p>你确认要退出系统么??
p>
template> <template v-slot:footer> <button>删除
button> <button>取消
button>
template> <template v-slot:default> <p>测试的内容
p>
template>
modal> <modal> <template v-slot:header> <h3>温馨提示
h3>
template> <template v-slot:content> <h4>嘎嘎, 你确认要删除内容么??
h4>
template> <template v-slot:footer> <button>是
button> <button>否
button>
template>
modal> .modal {
width: 400px; background-color: pink; border: 3px solid #000; border-radius: 20px; margin-bottom: 10px; padding: 20px; } Vue.component('modal', {
template: `
作用域插槽
如果在分发内容时, 需要用到子组件中的数据, 此时就可以用到作用域插槽
- 给 slot 添加自定义属性的方式, 传值
- 添加的自定义属性, 会以属性的方式添加到一个对象中去
{ money: 100, desc: ‘王校长’, yes: ‘是’, no: ‘否’ } - 在template中, 可以通过 = 进行接收传递的值
插槽也可以带有数据
Vue.component('modal', {
template: `
作用域插槽的使用
<modal> <template v-slot:header> <h3>警告
h3>
template> <template v-slot:content> <p>你确认要退出系统么??
p>
template> <template v-slot:footer="scoped">
{ scoped }} --> <button>{
{ scoped.yes }}
button> <button>{
{ scoped.no }}
button>
template>
<template v-slot:default="obj"> <p>测试的内容 {
{ obj.house }} - {
{ obj.car }}
p>
template>
modal> .modal {
width: 400px; background-color: pink; border: 3px solid #000; border-radius: 20px; margin-bottom: 10px; padding: 20px; } Vue.component('modal', {
template: `
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/208471.html原文链接：https://javaforall.net
