手机: 18919834768
电话热线: 0931-7603702
联系我们
加入收藏
商业授权
关于我们
网站知识
当前位置： 主页 > 网站知识

vue3组件插槽使用

发布时间：2023-04-17 16:35:21   来自:未知   编辑：兰州启点网络 www.lzqidian.com

学习要点：
1.插槽使用
本节课我们来开始学习 Vue3.x 的组件插槽的使用方法。
一．插槽使用
1. 组件中有一些高级的小功能，比如：插槽，可以实现内容的动态分发；
2. 有时，我们需要在组件模板中定义大量重复的内容区域，可以用插槽来避免重复；
3. 首先，我们先看下如下代码中的场景：
<div id="app">
<html-a>html-a>
<html-a>html-a>
<html-a>html-a>
<html-a>html-a>
div>
// 模板
template : `
{{message}}
****
PS：这里有四个，我们希望输出内容时，增加不同的符号，现有知识只能同一符号；
4. 如果可以在内部输入不同的符号内容，通过某种机制(插槽)来实现排版：
<div id="app">
<html-a>****html-a>
<html-a>@@@@html-a>
<html-a>####html-a>
<html-a>!!!!html-a>
div>
PS：这里被组件元素包含的内容，并不会真正被渲染，会直接被忽略掉；
5. 通过插值来分发组件内部包含的内容，具体如下：
// 模板
template : `
{{message}}
6. 如果组件元素中没有内容，也可以通过插槽提供一个默认值；
<html-a>html-a>
0000
本文由:兰州启点网络（www.lzqidian.com)整理发布!

上一篇： vue3具名插槽和作用域
下一篇： vue3组件双向绑定
  QQ咨询

建站咨询 售前咨询 私人订制 售后技术

  电话咨询

0931-7603702
（早9:00-晚10:00）

  微信咨询

扫码关注
点点租

  返回顶部

  • 优质服务

    High quality service

  • 精准定位

    Precise positioning

  • 品牌建设

    Brand construction

  • 极速建站

    Speed website

联系我们

  • 售前：13919397157
  • 售后：18919834768
  • 微信：18919834768

公司信息

  • 公司地址：兰州市安宁区枣林路 
  • 营销中心：0931-7603702    客服中心：18919834768
  • 电子邮箱：307815927@qq.com
Copyright ©2023 兰州启点网络信息有限公司 All Rights Reserved.   陇ICP备15000079号-3  公安备案号 62010002000427