vue中solt 的用法

最新推荐文章于 2024-04-19 11:30:35 发布
最新推荐文章于 2024-04-19 11:30:35 发布
阅读量4.1k 收藏
点赞数
分类专栏： vuejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_39143887/article/details/78421123
版权
<!DOCTYPE html>
<html lang="en">


<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
</head>


<body>
  <div id="app">
    <div>
      <!-- 单slot -->
      <v-one>
        <!-- 这里的所有内容会替换掉slot -->
        <p>初始化段落一</p>
        <p>初始化段落二</p>
      </v-one>
      <!-- 渲染结果 -->
      <!-- <div>
        <h1>组件标题</h1>
        <p>初始化段落一</p>
        <p>初始化段落二</p>
        <p>组件段落内容</p>
        <p>I am one</p>
      </div> -->




      <!-- 具名slot -->
      <v-two>
        <p slot="nav">我是导航</p>
        <p slot="main">我是内容</p>
        <p slot="footer">我是底部</p>
      </v-two>
      <!-- 渲染结果 -->
      <!-- <div>
        <nav>
          <p>我是导航</p>
        </nav>
        <main>
          <p>我是内容</p>
        </main>
        <footer>
          <p>我是底部</p>
        </footer>
      </div> -->




      <!-- 作用域插槽 -->
      <v-three>
      <!-- 父组件默认无法使用子组件数据 -->
          <template scope="props">
              <p>{{props.text}}</p>
          </template>
      </v-three>


      <!-- 渲染结果 -->
      <!-- <div><p>I am three</p></div> -->
    </div>
  </div>




  <template id="one">
    <div>
      <h1>组件标题</h1>
      <slot></slot>
      <p>组件段落内容</p>
      <p>{{one}}</p>
    </div>
  </template>




  <!-- 具名slot -->
  <template id="two">
    <div>
      <nav>
        <slot name="nav"></slot>
      </nav>
      <main>
        <slot name="main"></slot>
      </main>
      <footer>
        <slot name="footer"></slot>
      </footer>
      <p>{{two}}</p>
    </div>
  </template>


<!-- 作用域插槽 -->
  <template id="three">
    <div>
        <!-- 把数据传递给slot,这样父组件也可以访问three这个组件的数据 -->
      <slot :text="three"></slot>
    </div>
  </template>
  <script>
  new Vue({
    el: '#app',
    components: {
      'v-one': {
        template: '#one',
        data() {
          return {
            'one': 'I am one'
          }
        }
      },
      'v-two': {
        template: '#two',
        data() {
          return {
            'two': 'I am two'
          }
        }
      },
      'v-three': {
        template: '#three',
        data() {
          return {
            'three': 'I am three'
          }
        }
      }
    }
  });
  </script>
</body>


</html>
游世界
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
v-slot的使用与详解
weixin_44790314的博客
01-13 4万+
关于v-slot指令的详细了解 相对于v-slot指令，对大家来说都应该不是很陌生，在 2.6.0 中，vue为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 在新版中的应用，当然vue官方暂时还木有删除老版本中具名插槽和作用域插槽的和 slot-scope，也就是说，还可以用，但是不推荐，在vue-cli 3.0将不能使用 具名插槽新的改变 关于v-slot的指令，可以让我们不用再写过多的代码就可以做出slot具名插槽和slot-sc
vue 的 solt 子组件过滤过程解析
10-16
主要介绍了vue 的 solt 子组件过滤过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue传递值传递，slot
qq_33332184的博客
05-30 7678
通过on，on，on，emit传值 具体实现方式 var Event=new Vue(); Event.$emit(事件名,数据); Event.$on(事件名,data => {}); 实现示例 a.vue <template> <div> <button @click="send">发送a</button>...
深入理解与运用Vue 2中的插槽（Slots）
最新发布
2302_76609856的博客
04-19 583
Vue 2的插槽机制为组件设计带来了极大的灵活性，无论是默认插槽、具名插槽还是作用域插槽，都旨在提升组件的复用性和定制化程度。理解并熟练运用这些插槽类型，可以帮助开发者构建出更强大、更易于维护的组件体系，提升整个项目的开发效率和用户体验。在实践中，应根据具体业务需求选择合适的插槽类型，实现组件与父级模板之间的高效协作。
Vue----组件间传值与slot插槽
qq_40132294的博客
05-21 7617
1.父组件给子组件传值 在父组件App.vue中定义属性，然后将属性传给子组件 2.子组件获取父组件传递过来的数据：props:{}
vue 关于solt得用法
weixin_30505043的博客
10-31 100
solt 第一种用法 父组件 <templateSolt></templateSolt> <templateSolt> <p>slot分发了内容</p> </templateSolt> 子组件 <div> <h1>这是slot子组件</h1> <slot...
vue 插槽 slot 的用法
熊米
07-09 3372
vue插槽slot的用法
Vue中的v-slot详解，作用域插槽和具名插槽
热门推荐
屈小康
08-23 2万+
插槽 在2.6.0中，我们为具名插槽和作用域插槽引入了一个新的统一的语法，即v-slot。它取代了slot和slot-scope这两个目前已被废弃但未被移除且仍在文档中的attribute中。 插槽内容 Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 元素作为承载分发内容的出口。 它允许你像这样合成组件： ...
1-9.vue指令：v-slot指令与插槽
weixin_45660035的博客
12-13 4940
1-9.vue指令：v-slot指令 v-slot的作用 v-slot又叫做插槽，其主要是用在组件中，起到一个占位的作用。当组件复用时，某些地方对于不同地方组件的使用需要展示不同内容时就使用v-slot,当具体使用后根据自己的需求进行替换即可。 v-slot的使用 1.代码展示 <body> <div id='app'> <cpn1> <!-- 替换成按钮 --> <button>我想替换成按钮展示</bu
vue2的slot插槽
qq_43203949的博客
12-18 3274
vue的slot插槽 1.定义插槽 插槽使用slot标签来标识，并且插槽是放在组件的template模板里面的，vue允许向组件传递模板。Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 slot元素作为承载分发内容的出口。 定义模板 <!--假设这个组件叫my-com--> <!--组件模板如下：--> <template> <div> <p>------------
vue中插槽solt的使用
爬楼梯的前端小白的博客
01-29 2129
vue中插槽solt的使用
在Vue中使用echarts的方法
08-28
主要介绍了Vue中使用echarts的方法，非常不错，具有参考借鉴价值,需要的朋友可以参考下
详解vue中localStorage的使用方法
12-09
对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage 1.sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开...
Vue中使用canvas方法总结
01-19
下面就是小编带给大家的Vue中怎么使用canvas方法操作，希望能够给你们带来一定的帮助，谢谢大家的观看。 1、如果数组中都是canvas对象, vue如何能吧canvas对象渲染到页面。v-html只能渲染出一个字符串, 没办法像...
Vue2中插槽的使用
djsjsjjswj的博客
07-11 2373
定义slot 插槽的同时 是可以传值的 给插槽上可以绑定数据，将来使用组件可以用。<slot :id="item.id" msg="测试文本"></slot>通过插槽完成了任何内容的定制，传什么显示什么，如果不传，则是空白。封装组件时，可以预留<slot> 插槽提供后备内容（默认内容）插槽只有俩种，作用域插槽不属于插槽的一种分类。外部使用了组件，不传东西，则slot会显示后备内容。在<slot>标签内，放置内容，作为默认显示内容。外部使用组件时，传东西了，则slot整体会被换掉。
vue slot插槽——vue2、vue3默认插槽、具名插槽使用
扶摇的博客
03-24 3656
不管是vue2还是vue3的插槽，他们都分为两种：默认插槽和具名插槽。 插槽的优点就是，只需要摆放正确插槽出口的位置（样式调整好），定义插槽内容的顺序在组件中可以随意，但是同名的插槽内容总是会覆盖上一个插槽内容(vue2中)。 什么是默认插槽？什么是具名插槽？ slot标签不指定name属性的时候就是默认插槽，反之就是具名插槽。在定义插槽内容的时候，所有不指定插槽名称的内容，都会被输出到默认插槽的位置，反之也是一样。 vue2中插槽内容定义：在vue2.6.0之后，使用 v-slot或者语法糖#
vue3和vue2插槽slot的使用
学思QAQ的博客
07-03 741
slot插槽
Vue插槽Slot的使用
凉茶铺的博客
01-19 4041
介绍vue中slot插槽的概念和其使用方式
vue v-slot指令
qq_45862085的博客
08-04 2274
在Vue中， v-slot 指令用于定义插槽的模板内容。它用于在父组件中传递内容到子组件中的插槽。v-slot 指令可以用于 标签或组件标签上，以便在子组件中使用插槽。
vue中solt的使用方式，以及solt作用域插槽的用法
06-09
在 Vue 中，slot（插槽）是一种特殊的元素，允许我们将子组件的内容传递到父组件中进行渲染。具体使用方式如下： 1. 在父组件中，使用`<slot>`元素来声明一个插槽： ```html <slot></slot> ``` 2. 在子...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值