>>分享孙卫琴的Java技术专稿和著作 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 8342 个阅读者 刷新本主题
 * 贴子主题:  【Vue.js技术专题】插槽slot的基本用法 回复文章 点赞(0)  收藏  
作者:sunweiqin    发表时间:2022-08-29 16:22:04     消息  查看  搜索  好友  邮件  复制  引用

本文参考孙卫琴,杜聚宾所创作的 <<精通Vue.js: Web前端开发技术详解>>一书

Vue组件可以像DOM元素一样插入到父组件的模板中。许多DOM元素都具有内容,例如以下<div>元素的内容为“Hello”:
<div>Hello</div>

那么,是否可以为Vue组件提供内容呢?答案是肯定的,可以使用Vue的<slot>插槽组件来实现。如图1所示,<slot>组件的工作机制如下:
(1)在子组件的模板的特定位置插入<slot>组件,表示此处存在一个插槽。
(2)父组件的模板为子组件模板中的<slot>组件提供内容,子组件模板的<slot>组件读取父组件提供的内容,并把它插入到子组件模板中。
点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小
图1  <slot>组件的工作机制

在例程1的basic.html中有一个<display>组件,在它的模板中插入了<slot>组件:

template: '<div><slot></slot></div>'

在basic.html中,根组件就是<display>组件的父组件。在根组件的模板中,为<slot>组件提供了内容“Hello”:

<display class="pinkbox">Hello</display>

<display>组件模板中的<slot>组件能够读取以上内容“Hello”,并把它插入到<display>组件的模板中。
例程1  basic.html

    <style>
      .pinkbox {
        width: 200px;
        height: 25px;
        background-color: pink;
        text-align:center
      }
    </style>  

    <div id="app">
      <display class="pinkbox">Hello</display>
    </div>

    <script>
      const app=Vue.createApp({ })
      app.component('display', {
        template: '<div><slot></slot></div>'
      })
      app.mount('#app')
    </script>

通过浏览器访问basic.html,会得到如图2所示的网页。
点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小
图2  basic.html的网页

根组件模板中的<display>组件渲染后的结果为:

<div class="pinkbox">Hello</div>

由此可见,<display>组件模板中的<slot>组件就像占位标记,它能够把父组件提供的内容插入到子组件模板中<slot>组件所在的位置。






程序猿的技术大观园:www.javathinker.net
  Java面向对象编程-->Java常用类(下)
  JavaWeb开发-->Web运作原理(Ⅱ)
  JSP与Hibernate开发-->使用JPA和注解
  Java网络编程-->Java反射机制
  精通Spring-->CSS过渡和动画
  Vue3开发-->通过Axios访问服务器
  【Vue.js技术专题】Vue组件的数据监听
  【Spring Cloud Alibaba专题】按照集群模式搭建Redis集群
  【Spring Cloud Alibaba专题】OpenFeign开启对请求和响应数据...
  【Spring专题】把Model的数据存放在session范围
  【Spring专题】@ControllerAdvice注解的用法
  【Spring专题】RestTemplate类与RESTFul风格的请求
  【Vue专题】Vue3的计算属性实用范例:实现购物车
  【持久化专题】映射一对多双向关联关系
  【持久化专题】用@MapsId注解映射派生主键
  【持久化专题】@Enumerated注解映射枚举类型
  【持久化专题】JPA API的基本用法
  【Java网络编程专题】用Apache FTPClient在FTP服务器上创建目...
  【Java网络编程专题】异步通道和异步运算结果
  【Java基础编程专题】用内部类实现回调
  【Java基础编程专题】定时器Timer类的用法
  更多...
 IPIP: 已设置保密
树形列表:   
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。