slot 插槽

最新推荐文章于 2024-05-28 17:25:55 发布
最新推荐文章于 2024-05-28 17:25:55 发布
阅读量106 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45178972/article/details/111337947
版权
  • 组件的插槽：
    • 为了让我们封装的组件更加具有扩展性
    • 让使用者可以决定组件内部的一些内容到底展示什么
<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>

  <div id="app">
    <cpn><button>按钮</button></cpn>
    <cpn><a href="#">baidu</a></cpn>
    <cpn></cpn>
  </div>

  <!-- 子组件模板 -->
  <template id="cpn">
    <div>
        <h2>我是标题</h2>
        <!-- 当没有给slot传数据时，默认显示哈哈 -->
        <slot><i>哈哈</i></slot>
    </div>
  </template>

  <script>
    //子组件
    const cpn = {
      template: "#cpn",
      methods:{}      
   
    }
    //父组件
    const app = new Vue({
      el: "#app",
      data: {},
      methods: {
      },
      components:{
        cpn,
      }
    })
  </script>
</body>

</html>
  • 具名插槽
<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>

  <div id="app">
    <cpn>
      <span slot="left"> 返回</span>
      <input slot='center' placeholder="搜索"/>
      <a slot="right" href="#">更多</a>
    </cpn>
  </div>

  <!-- 子组件模板 -->
  <template id="cpn">
    <div>
        <slot name='left'><span >left</span></slot>
        <slot name='center'><span >middle</span></slot>
        <slot name='right'><span>right</span></slot>
    </div>
  </template>

  <script>
    //子组件
    const cpn = {
      template: "#cpn",
      methods:{}      
   
    }
    //父组件
    const app = new Vue({
      el: "#app",
      data: {},
      methods: {
      },
      components:{
        cpn,
      }
    })
  </script>
</body>

</html>
  • 作用域插槽：在父组件使用我们的子组件时，从子组件中拿到数据
<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
</head>

<body>

  <div id="app">
    <cpn>
      <!-- 获取子组件slot标签上的数据 -->
      <!-- slot名字随便起 -->
      <template slot-scope='slot'>
        <!-- <span v-for='item in slot.data'>{{item}}</span> -->
        <span>{{slot.data.join(' * ')}}</span>
      </template>
    </cpn>
  </div>

  <!-- 子组件模板 -->
  <template id="cpn">
    <div>
        <!-- data随便起 -->
        <slot :data='pLanguages'>
        <ul><li v-for='item in pLanguages'>{{item}}</li></ul>
      </slot>
    </div>
  </template>

  <script>
    //子组件
    const cpn = {
      template: "#cpn",
      methods:{},
      data(){
        return{
          pLanguages:['Java','C#','python','c++','Go']
        }
      }      
   
    }
    //父组件
    const app = new Vue({
      el: "#app",
      data: {},
      methods: {
      },
      components:{
        cpn,
      }
    })
  </script>
</body>

</html>
  • int和Integer面试题
 int i1 = 3;
        Integer i2 = new Integer(3);
        Integer i3 = 3;
        System.out.println(i1 == i2); //int和Integer（拆包） ==，比的是内容 true
        System.out.println(i2 == i3); //对象之间==，比较内存地址 false
        System.out.println(i1 == i3);//true
  • background-size:100% auto;将背景图片的长度100%显示，高度自适应
  • background-color: #00000090；不透明度90%显示，如果00,表示透明显示
Jookerone
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue学习笔记之slot插槽用法实例分析
10-15
Vue.js 是一个流行的前端框架，它提供了一种强大的机制来实现组件间的动态内容插入，这就是所谓的`slot插槽`。在Vue中，插槽允许父组件向子组件传递内容，并在子组件模板的特定位置进行渲染。让我们深入探讨一下`...
vue slot插槽.rar
07-19
在Vue中，组件化是其核心特性之一，而slot插槽机制则是实现组件间通信和内容分发的关键工具。本资料"vue slot插槽.rar"显然是针对Vue组件中的slot功能进行深入讲解的。 **一、什么是Vue Slot** Vue Slot是Vue组件...
slot插槽
前端小99的博客
11-05 1024
<slot>为vue的内置标签：用于给组件定义一个插槽，在这个插槽里传入内容（可以是模板代码或者组件），达到动态改变组件的目的。 什么是插槽？ 插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。 插槽显不显示、怎样显示是由父组件控制，<sl...
vue系列之 插槽(Slot) 详解
最新发布
共同学习，共同成长
05-28 2860
插槽在vue中是一种很常见的写法，让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式。一共有三种分类：默认插槽、具名插槽、作用域插槽，下面一一根据案例改造说明。
slot插槽与授权组件
01-07
在组件中，有时候承载信息过多而无法灵活使用，这个时候就需要一个slot插槽来让组件可以承载来自页面WXML的内容 组件中添加了插槽后就可以直接使用，但是如果是同时使用了多个插槽，那么单纯插入多个插槽是不管用的...
vue学习笔记之slot插槽基本用法实例分析
10-15
1. **默认插槽（Default Slot）** 默认插槽是最基础的插槽类型，当父组件向子组件传递内容时，如果没有指定插槽名称，这些内容将被放入默认插槽。在上面的例子中，我们看到这样一段代码： ```html <p>Rachel ...
vue学习之slot插槽
01-07
slot插槽 ---------------------------- 123 456 789 //slot比较特殊，所以导入的时候不能直接写slot import slots from @/components/slot export default{ data(){ return{ } }, components:{ ...
插槽（slot）
interstingh的博客
03-28 497
插槽 插槽是vue为组件的封装提供的功能 允许开发者在封装组件时，把不确定的、希望用户指定的部分定义为插槽 即在组件调用的标签中把自定义内容插入对应组件的slot区域 子组件的插槽区域 slot声明一个插槽区域 vue官方规定：每个slot插槽都要有一个name名称 如果省略了slot的name属性，则有一个默认名称叫做default，当所有插槽都命名时，默认将内容填充到所有未命名的插槽中 第一种 <cp1>yuyuyjh <h1 slot="b"> 我是1111
插槽slot
qq_46112274的博客
02-13 218
1、为什么使用插槽 组件的插槽是为了让组件更具有扩展性 2、如何封装这类组件 3、插槽的基本使用 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compa
vue——slot插槽
发育中的前端
03-30 324
文章目录什么是插槽？插槽内容后备内容 什么是插槽？ 插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。 插槽内容 简单来说就是在父组件中给子组件模板，子组件直接可以通过使用。 1、在子组件left中放一个占位符 <template> <div id="chlid"> <h1>我是子组件</h1> <slot></slot&
Vue中的slot插槽
qq_50582468的博客
04-02 1335
但是为了让这个组件具备更强的通用性，我们不能将组件中的内容限制为固定的标签元素；例如某种情况下我们使用组件，希望组件显示的是一个视频，一张图片或按钮，插槽可以让使用者灵活的决定组件内某一块区域中放什么内容。插槽可以提供一个默认内容，如果父组件没有为这个插槽提供内容，会显示默认的内容。slot具有“占坑”的作用，在子组件占好了位置，那父组件使用该子组件标签时，新添加的DOM元素就会自动填到这个坑里面。slot没有指定name属性值的时候显示一个默认插槽，一个组件内只有一个默认插槽。（3）slot插槽的分类。
vue2.0——slot 插槽
Leon的博客
03-05 1468
单个插槽 &lt;template&gt; &lt;div id="example"&gt; &lt;h1&gt;我是父组件的标题&lt;/h1&gt; &lt;app-layout&gt; &lt;p&gt;主要内容的一个段落。&lt;/p&gt; &lt;p&gt;另一
slot插槽使用
flynn_
10-12 142
子组件 base-layout <!-- 子组件：base-layout --> <template> <div> <slot name="header">备用值</slot> <!-- name 默认值为 default 即：默认插槽 --> <slot></slot> <slot name="footer"></slot> </.
slot插槽的使用
weixin_41610842的博客
07-06 146
1、 pages下面的四个组件都需要用到一个同一个header，现将header封装成一个组件。 2、MSite组件下的header内容 3、 HeaderTop中，通过两个slot插槽占位，并给slot一个name属性，后面组件在使用slot占位时通过name来关联，中间的内容是固定的结构，只是内容不确定，我们接收一个属性用title命名。 同时将MSite中对于header的css样式拷贝过来。 放好后这个属性要接收一个值进行声明。 那么这个组件就算封装好了，接下来就是使用。 4、在
form表单slot插槽
07-27
form表单中的slot插槽是指在form组件内部定义的可插入内容的区域。通过使用slot插槽，我们可以在form表单中添加自定义的内容，例如表单标题、按钮等。 在Vue.js中，我们可以通过以下方式使用slot插槽： 1. 在form...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值