当前位置:首页 > 编程教程 > vue技术文章 > vue如何使用 Slot 分发内容实例详解

vue用Slot分发内容的实例分享

  • 发布时间:
  • 作者:码农之家
  • 点击:63

这篇文章主要知识点是关于vue、Slot、分发内容、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Spring Boot+Vue全栈开发实战
  • 类型:Spring大小:196.3 MB格式:PDF作者:王松
立即下载

vue如何使用 Slot 分发内容实例详解

vue我自己还在摸索学习中,今天学习了使用 Slot 分发内容,给自己留个小笔记

使用slot分发内容我们要注意2点

<app> 组件不知道它会收到什么内容。这是由使用 <app> 的父组件决定的。

<app> 组件很可能有它自己的模板。

为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板。

【案例】

<!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>vue-Slot 分发内容</title>
  <script type="text/javascript" src="js/vue.js"></script>
  <style>
    .sf{
      margin: 10px;
      width: 150px;
      border: 1px solid #ccc;
    }
    .sf-header,.sf-bottom{
      height: 30px;
      background: sandybrown;
    }
    .sf-body{
      min-height: 100px;
    }

  </style>
</head>
<body>
  <div id="app">
    <shoufa>
      <h2 slot="title">学习vue</h2>
      <p>Vue.js(读音 /vjuⴀ/,类似于 view) 是一套构建用户界面的渐进式框架。
        与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。
        Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合</p>
      <h4 slot="bottom">vue很好学</h4>
    </shoufa>
  </div>
  <script type="text/x-template" id="sfTpl">
    <div class="sf">
      <div class="sf-header"><slot name="title"></slot></div>
      <div class="sf-body">
        <slot></slot>
      </div>
      <div class="sf-bottom"><slot name="bottom"></slot>
      </div>
    </div>
  </script>

  <script>
    var sf ={
      template:"#sfTpl",
    }
    var app = new Vue({
      el:"#app",
      components:{
        'shoufa':sf
      }
    })
  </script>
</body>
</html>

结果如下

vue如何使用 Slot 分发内容实例详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

vue Slot 相关电子书
学习笔记
网友NO.763578

vue template中slot-scope/scope的使用方法

在vue 2.5.0+ 中slot-scope替代了 scope template 的使用情形为,我们已经封装好一个组建,预留了插槽,使用 的插槽 首先 我们的创建一个组建 组建很简单有一个 slot,slot有两个属性 a=123,b=msg template div div下面是一个slot/div slot a="123" b="msg" /slot /div/template 接下来我们引入组建,并使用组建,引入的组建名 为mysolt,并使用组建 然后使用 template ,并使用scope/slot-scope, div mysolt template scope="msg" div下面是solt的props 调用/div div{{msg}}/div div{{msg.a}}/div div{{msg.b}}/div /template /mysolt/div 渲染图如下: 其实就是 template 通过scope/slot-scope 属性 调用组建 slot 的属性,以达到可以调用组建属性实现复杂的嵌套; 实例中 我使用 msg 来重命名 slot 的属性对象,即 msg 为slot 的{a:'123',b:'msg'}, 就可以通过使用msg 在template 中使用slot的属性 (注意:当前层 如果有data已经声明过 msg,它们之间互不干扰,……

网友NO.227490

Vue.js中组件中的slot实例详解

Vue组件中的slot slot 可以实现在已经定义的组件中添加内容,组件会接收内容并输出,假如有一个组件person,它的里面包含的是个人信息,如下面这样 template id="per" div p姓名:.../p p年龄:.../p p职业:.../p /div /template 在应用的时候,当然希望这里面可以是灵活变化的,所以这就需要用到slot了 首先要做的事情就是创建这样一个组件,这里我采用的是template的形式,如下面这样 template id="per" div p姓名:/p p年龄:/p p职业:/p /div /template 可以看到我这里给template添加了id,这个是为了后面的操作 下面使用Vue的构造器,创建Vue实例,然后添加局部的组件,如下面这样 var person = { template : "#per" //利用id }; new Vue({ el: "#app", data: { componentData: { name : "vam", age : 18, job : "student" } }, components : { "person" : person } }); 接下来就是要在person 组件使用的时候添加点东西,就是具体内容,下面这……

网友NO.599341

Vuejs第十一篇组件之slot内容分发实例详解

什么是组件? 组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。 Slot分发内容 ①概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示、不显示、在哪个地方显示、如何显示,就是slot分发负责的活。 ②默认情况下 父组件在子组件内套的内容,是不显示的。 例如代码: div id="app" children span12345/span !--上面这行不会显示-- /children /div script var vm = new Vue({ el: '#app', components: { children: { //这个无返回值,不会继续派发 template: "button为了明确作用范围,所以使用button标签/button" } } }); /script 显示内容是一个button按钮,不包含span标签里面的内容; ③单个slot 简单来说……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com