vue Render中slots的使用的实例代码

2024-02-25 09:19:11

本文介绍了vue Render中slots的使用的实例代码，有需要了解vue Render中slots用法的朋友可参考。希望此文章对各位有所帮助。

render 中 slot 的一般默认使用方式如下：

this.$slots.default 对用 template的<slot>的使用没有name 。

想使用多个slot 的话。需要对slot命名唯一。使用this.$slots.name 在render中添加多个slot。

<body>
  <div class="" id="app">
  <myslot>
    <div>this is slot</div>
  </myslot> 

  </div>
  <script>
  Vue.component('myslot',{
    render:function(createElement){
       var he=createElement('div',{domProps:{innerHTML:'this child div'}});
      return createElement('div',[he,this.$slots.default])
      }
  });
  var app=new Vue({
    el:'#app'
  })
  </script>
  </body>

多个slot的使用

<body>
  <div class="" id="app">
  <myslot>
    <div slot="name1">this is slot</div>
    <div slot="name2">The position is slot2 </div>
  </myslot> 

  </div>
  <script>
  Vue.component('myslot',{
    render:function(createElement){
       var he=createElement('div',{domProps:{innerHTML:'this child div'}});
      return createElement('div',[he,this.$slots.name2,this.$slots.name1])
      }
  });
  var app=new Vue({
    el:'#app'
  })
  </script>
  </body>

在vue2.1.0新添加了scope(虽然感觉有点怪，但是用习惯了，还蛮好用的)。同样给出一般使用和多个使用示例，

<body>
  <div class="" id="app">
  <myslot>
    <template scope="props">
      <div>{{props.text}}</div>
    </template> 

  </myslot> 

  </div>
  <script>
  Vue.component('myslot',{
    render:function(createElement){
       var he=createElement('div',{domProps:{innerHTML:'this child div'}});
      return createElement('div',[he,this.$scopedSlots.default({
        text:'hello scope'
      })])
      }
  });
  var app=new Vue({
    el:'#app'
  })
  </script>
  </body>

多个$scopedSlot的使用

<body>
  <div class="" id="app">
  <myslot>
    <template slot="name2" scope="props">
      <div>{{props.text}}</div>
    </template>
    <template slot="name1" scope="props">
      <span>{{props.text}}</span>
    </template> 

  </myslot> 

  </div>
  <script>
  Vue.component('myslot',{
    render:function(createElement){
       var he=createElement('div',{domProps:{innerHTML:'this child div'}});
      return createElement('div',
        [he,
        this.$scopedSlots.name1({
        text:'hello scope'
      }),
        this.$scopedSlots.name2({
        text:'$scopedSlots using'
      })])
      }
  });
  var app=new Vue({
    el:'#app'
  })
  </script>
  </body>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vue.js render方法使用详解

前注: 版本限制: Vue.js 2.0+ 1.0无法使用没耐心,只关心有什么用的,想知道其大概是获取什么东西后生成的,可以直接看结尾的总结非使用render方法的情况完整代码: <!DOCTYPE html> <html> <head> <title>Vue的render方法说明</title> <script src="https://unpkg.com/vue@2.1.10/dist/vue.js">&
vue深入解析之render function code详解

前言最近在深入的学习研究vue,其实vue在使用上入门并没有什么太高的门槛,但前端同学们也不该仅仅停留在使用上.以 vue 设计.编码之优秀,足当抽丝剥茧,扒开它的外壳,深入其原理.让我们一起来刺破 vue 的心脏,下面话不多说了,来一起看看详细的介绍吧. vue核心执行过程图 vue核心的执行过程主要分为这几个阶段: 1) 编译模板,生成可复用的render function code(这是今天要重点解读的),这一步在vue实例的整个生命周期中只会执行一次甚至零次,因为我们可以在打包的时候可
了解VUE的render函数的使用

Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器. 在 HTML 层, 我们决定这样定义组件接口:通过传入不同的level 1-6 生成h1-h6标签,和使用slot生成内容 <div id="div1"> <child :level="1">Hello world!</chil
深入理解vue Render函数

最近在学习vue,正好今日留个笔记,我自己还在摸索学习中,现整理出来以作记录. 会使用基本的Render函数后,就会想,这怎么用 v-for/v-if/v-model;我写个vue Render函数进阶首先是v-if 的转化使用全局组件的v 值决定组件渲染的状态,对实例中传递的props的"nnum"值得控制可以自如的切换两种状态显示.这样就是和v-if 一样使用组件了 <div id="app"> <mycom :v="nnum&qu
Vue2.x中的Render函数详解

Render函数是Vue2.x版本新增的一个函数:使用虚拟dom来渲染节点提升性能,因为它是基于JavaScript计算.通过使用createElement(h)来创建dom节点.createElement是render的核心方法.其Vue编译的时候会把template里面的节点解析成虚拟dom: 什么是虚拟dom? 虚拟dom不同于真正的dom,它是一个JavaScript对象.当状态发生变化的时候虚拟dom会进行一个diff判断/运算:然后判断哪些dom是需要被替换的而不是全部重绘,所以性能
vue Render中slots的使用的实例代码

本文介绍了vue Render中slots的使用的实例代码,有需要了解vue Render中slots用法的朋友可参考.希望此文章对各位有所帮助. render 中 slot 的一般默认使用方式如下: this.$slots.default 对用 template的<slot>的使用没有name . 想使用多个slot 的话.需要对slot命名唯一.使用this.$slots.name 在render中添加多个slot. <body> <div class="&qu
在Vue项目中使用d3.js的实例代码

之前写一个 Demo里面有些东西要使用d3实现一些效果但是在很多论坛找资源都找不到可以在Vue里面使用D3.js的方法,npm 上面的D3相对来说可以说是很不人性化了完全没有说在webpack上怎么使用D3.js 最后折腾很久看到某位外国大佬看他的案例成功的实现了在Vue项目里面实现D3的使用首先安装 npm install d3 --save-dev 以防万一,然后看package.json 安装完成在我们开始之前,让我们渲染一个Vue组件,它使用常规的D3 DOM操作呈现
vue中使用mxgraph的方法实例代码详解

1.npm 引入 npm install mxgraph --save 2.这个模块可以使用require()方法进行加载.它将返回一个接受对象作为选项的工厂函数.必须将mxBasePath选项提供给工厂函数,而不是将其定义为一个全局变量. var mxgraph = require("mxgraph")( { // 以下地址不需要修改 mxImageBasePath: "./src/images", mxBasePath: "./src" })
vue中datepicker的使用教程实例代码详解

写这个文章主要是记录下用法,官网已经说的很详细了 npm install vue-datepicker --save html代码 <myDatepicker :date="startTime" :option="multiOption" :limit="limit"></myDatepicker> <myDatepicker :date="endtime" :option="timeo
vue组件中的样式属性scoped实例详解

Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素它是通过使用PostCSS来改变以下内容实现的: <style scoped> .example { color: red; } </style> <template> <div class="example">hi</di
vue 中固定导航栏的实例代码

点击按钮回顶 <template lang="html"> <div class="gotop-box"> <i @click="gotop"class="icon topIcon"></i> </div> </template> <script> export default { methods: { gotop: function () {
Vue组件中使用防抖和节流实例分析

在监听频繁触发的事件时,一定要多加小心,比如用户在输入框打字.窗口大小调整.滚动.Intersection Observer 事件. 这些事件总是被频繁触发,可能几秒一次.如果针对每次事件都发起 fetch 请求(或类似的行为),那显然是不明智的. 我们需要做的就是减缓事件处理程序的执行速度.这种缓冲技术就是防抖(debounce) 和节流(throttle) . 1. 观察者防抖我们先从一个简单的组件开始,我们的任务是将用户输入到文本框中的文本输出到控制台: <templat
vue.js加载新的内容(实例代码)

vue是一种轻巧便捷的框架,那么如何进行对于数据加载的刷新呢?以下就是我对于vue.js数据加载的一点想法源码: <div @scroll="onScroll($event)" style="height: 100%;overflow: auto;"> <ul class="shop-brand-index" v-show="sitems.length > 0" > <li v-for=&
vue实现仿淘宝结账页面实例代码

虽然Vue最强大的是组件化开发,但是其实多页面开发也蛮适合的.下面小编给大家分享vue实现仿淘宝结账页面实例代码,具体内容大家参考下本文. 这个demo,是小编基于之前的 vue2.0在table中实现全选和反选文章进行更新后的demo,主要功能呢,是仿照淘宝页面的结算购物车商品时自动算出合计价格的页面,具体页面效果请看下面的动图:(如果大家发现有什么问题请及时提出帮小颖改正错误呦,谢谢啦嘻嘻) 效果图: 更新后的home.vue <template> <div class="
使用Vue动态生成form表单的实例代码

具有数据收集.校验和提交功能的表单生成器,包含复选框.单选框.输入框.下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展. 欢迎大家star学习交流:github地址示例 https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg 安装 npm install form-create OR git clone https://github.com/xa

vue Render中slots的使用的实例代码

相关推荐

随机推荐