vue之template标签及插槽slot

最新推荐文章于 2024-07-31 18:30:30 发布
最新推荐文章于 2024-07-31 18:30:30 发布
阅读量4.3w 收藏 31
点赞数 19
分类专栏： vue 文章标签： vue之template标签及插槽slot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44268707/article/details/88725462
版权

template

<!DOCTYPE html>
<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>template使用</title>
</head>
<!-- 
  在Vue中使用template标签的时候，此标签不会在页面中进行渲染显示
  当我们在做自定义组件的时候可以使用template标签在html代码中定义一个模本节点
    此节点放置在vue实例的作用范围之外,不会被渲染在页面上
    在定义自定义组件的时候可以根据template的id设置为自定义组件的模板
 -->
<body>
  <div id="app">
    <t2></t2>
    <div v-for="i in 5">
      <h5>我是h1</h5>
      <p>我是一段简介</p>
    </div>

    <template v-for="i in 5">
      <h5>我是h6</h5>
      <p>我是一段简介</p>
    </template>

    <template>
      <h2>我是h2</h2>
    </template>
    <t></t>
  </div>
  <template id="tpl">
    <div>
      <h2 style="color: deeppink;">我是h2</h2>
      <p>我是t组件中的一段话</p>
    </div>
  </template>
  <script src="./lib/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        list: [],
      },
      components: {
        t: {
          template: '#tpl'
        },
        t2: {
          template: `<template>
              <h3>我这是t2自定义组件</h3>
            </template>`
        }
      }
    })
  </script>
</body>
</html>

插槽

<!DOCTYPE html>
<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>插槽</title>
</head>
<body>
  <!-- 
    插槽相当于一个占位符，当没有内容传递过去的时候会显示插槽的内容，有内容时不会显示插槽的内容

    具名插槽
      一个组件中可以使用多个插槽,为了区分每一个插槽的位置可以添加名字
        通过name属性设置名字
      在父组件中使用具名插槽的时候需要把插入的内容放置在template节点中
        使用v-slot:插槽的name值 进行绑定位置
        v-slot可以简写为#
      在既有具名插槽又有默认插槽的时候
        如果不使用v-slot进行绑定name会把所有的内容都插入在默认位置
   -->
  <div id="app">
    <child>
      <h5 style="color: deeppink;">我是一段话</h5>
    </child>
    <child>
      <h5 style="color: deeppink;">我是一段话</h5>
      <p style="color: deeppink; font-size: 0.8rem;">我是一段话</p>
      <p style="color: deeppink; font-size: 12.8px;">我是一段话</p>
    </child>
    <child2>
      <template v-slot:t>
        <h5 style="color: deeppink;">《三体》</h5>
      </template>
      <template #p>
        <p style="color: red;">￥39.28</p>
      </template>
      <p>不要回复，不要回复，不要回复......</p>
    </child2>
  </div>
  <script src="./lib/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      components: {
        child: {
          template: `
          <div>
            <p>我是一行话</p>
            <slot>这是占位内容</slot>
          </div>
          `,
        },
        child2: {
          template: `
          <div>
            <h5>此处的内容展示多个插槽</h5>
            <div class="title">
              <slot name="t">此处应该显示标题内容</slot>
            </div>
            <div class="price">
              <slot name="p">此处显示价格</slot>
            </div>
            <div class="descriptions">
              <slot>此处应该显示简介内容</slot>
            </div>
          </div>
          `
        }
      }
    })
  </script>
</body>
</html>

在这里插入图片描述

懒人修
关注
专栏目录
vue系列之 插槽(Slot) 详解
共同学习，共同成长
05-28 4786
插槽在vue中是一种很常见的写法，让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式。一共有三种分类：默认插槽、具名插槽、作用域插槽，下面一一根据案例改造说明。
elementui//el-table 的 template slot
weixin_37877794的博客
09-08 762
文章目录slot-scope#default slot-scope <template slot-scope="scope">{{scope.row.name}}{{scope.$index}}</template> <el-table-column label="姓名"> <template slot-scope="scope"> {{ scope.row.name }} </template> </el-tab
【vue3】template标签的一些理解（提了一嘴component标签）
最新发布
weixin_57208584的博客
07-31 1250
所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。在引用组件的时候，在该组件的子元素里面定制template内容，导入到指定slot插槽内。它属于占位符，其本身不作为节点挂入DOM树，但是可以将包裹着的子元素展示，形成一虚拟DOM。利用这一特点，我们平常写vue3的时候可以用它来作为父元素，从而提升渲染性能，比如在写。，并结合响应式的数据和状态，以最优化最少的次数操作、更新真实DOM。这时候，使用template包裹，就可以实现只重复渲染子元素。
Vue中插槽的使用
李公子的博客
08-11 443
插槽的作用： 让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ===> 子组件。 分类：默认插槽、具名插槽、作用域插槽 使用方式 默认插槽： 父组件中： <Category> <div>html结构1</div> </Category> 子组件中： <template> ...
vue中slot和template用法传值
ghx123456ghx的博客
01-10 1182
slot和template传值
template 标签 VUE v-slot 用法
sani_x的博客
05-18 6401
匿名插槽(也叫默认插槽) 没有名字，但是只能有一个 父 <todo-list> <template v-slot:default> 任意内容 <p>我是匿名插槽 </p> </template> </todo-list> 子 <slot>我是默认值</slot> 具名插槽 比上面的好点有个名字 父 <todo-list> <te
vue组件-template 和slot插槽
chuaichonglong5903的博客
08-09 2244
1.组件template vue组件子组件引用，在父组件中引用，引用方式通过from import NavHeader from '../components/NavHeader.vue' import NavFooter from '@/components/NavFooter.vue...
vue template中slot-scope/scope的使用方法
10-18
在 Vue 2.5.0 及更高版本中，引入了一个新的特性——`slot-scope`（后来在 Vue 3 中被 `v-slot` 替代），用于在父组件中动态地传递数据到子组件的插槽内。`slot-scope` 或 `scope` 关键字允许我们在子组件的插槽内...
vue中的 $slot 获取插槽的节点实例
10-16
在Vue.js中，插槽（slot）是一个非常重要的概念，允许开发者在父组件中控制子组件的某些区域，从而实现更加灵活的组件复用。Vue 2.6.0 引入了作用域插槽（scoped slots），使得插槽可以使用子组件的数据。在Vue ...
详解vue slot插槽的使用方法
08-30
Vue 中的 Slot 插槽使用方法详解 Vue 中的插槽（Slot）是一种强大的功能，它允许开发者在组件中插入任意的内容，从而提高组件的灵活性和可重用性。下面，我们将详细介绍 Vue 中的插槽使用方法。 1. 单个 Slot ...
vue学习笔记之slot插槽用法实例分析
10-15
Vue.js 是一个流行的前端框架，它提供了一种强大的机制来实现组件间的动态内容插入，这就是所谓的`slot插槽`。在Vue中，插槽允许父组件向子组件传递内容，并在子组件模板的特定位置进行渲染。让我们深入探讨一下`...
Vue组件中的slot
Dear_Mr的博客
05-24 1350
Vue组件中的slotslot 可以实现在已经定义的组件中添加内容，组件会接收内容并输出，假如有一个组件person，它的里面包含的是个人信息，如下面这样 <template id="per"> <div> <p>姓名:...</p> <p>年龄:...</p> <p>职业:...</p>
vue系列之插槽（slot）详解
胡西风的博客
04-02 3430
插槽（Slot）是 Vue 提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制其实就是在子组件中定义插槽时，给对应的插槽分别起个名字，方便后边插入父组件将根据 name 来填充对应的内容。作用域插槽就是实现在子组件自行决定自己要显示什么内容动态指令参数也可以用在 v-slot 上，来定义动态的插槽名。
Vue-slot
qq_24243695的博客
10-28 155
Vue中插槽的目录如下： 插槽内容 编译作用域 后备内容 具名插槽 作用域插槽 独占默认插槽的缩写语法 5.2解构插槽Prop 动态插槽名 具名插槽的缩写 插槽内容 编译作用域 后备内容 具名插槽 作用域插槽 独占默认插槽的缩写语法 解构插槽Prop 动态插槽名 具名插槽的缩写 ...
vue插槽(slot)详解
咘噜biu的博客
11-21 5770
1.什么是插槽： 插槽可以让我们在自定义组件的时候把一部分内容预留出来，留给使用该组件的人去自定义，同时我们还可以传递一些数据供其使用。 2.插槽是定义： 格式： <slot name="插槽名称" :xxx="数据1" :yyy="数据2"></slot> <!-- 说明： 1.name可以不写，默认值为"default"，这种插槽称为不具名插槽，但是...
自定义模版组建，利用vue的slot
sinat_41657240的博客
04-19 332
前言：在做后台管理系统的时候，经常会有左右结构页面，还有都是列表的页面，左右结构的页面还可以进行拖拽，实现可视区域变大变小，这样我们就可以把这个框架写成组件，避免框架的样式重复写 <template> <div class="T-m2OrgUser T-sys-manager"> <slot name="header"> <!-- 如果页面有面包屑可以写在这里，如果没有可以删除 --> </slot> &
＜component＞ ＜slot＞ ＜template＞三者之间的区别与使用
YHLSunshine的博客
04-25 1132
VUE 项目中 ＜component＞ ＜slot＞ ＜template＞ 三者之间的区别与使用
slot插槽及Element-ui 中＜template slot-scope=“scope“＞
m0_63005501的博客
12-02 8871
slot多种插槽及Element-ui 中＜template slot-scope=“scope“＞
助你了解vue的slot插槽，（通俗易懂）
QXHBK的博客
11-18 683
slot 插槽，学习插槽你需要对vue的组件有一定的了解，如果你还不了解vue的组件，建议先去看一下组件，之后也会写相关的组件使用教程 顾名思义，在父组件引用自组件时，往里面插别的东西 <child-component> <p>组件里插进去的别的东西</p> </child-component> 插槽内容 先看一眼 <template> <div> &lt...
Vue作用域插槽slot-scope深度解析与实例
"Vue作用域插槽slot-scope的实例代码和应用场景解析" Vue.js 是一款流行的前端框架，它提供了一种强大的方式来实现组件间的交互和内容重用，其中插槽（slots）机制是一个关键特性。插槽允许我们在组件内部定义可...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值