理解vue中render函数

最新推荐文章于 2022-11-03 15:23:56 发布
最新推荐文章于 2022-11-03 15:23:56 发布
阅读量926 收藏 1
点赞数
分类专栏： 【Vue2.0-3.0点滴知识 】

首先要理解如何通过props来进行父子组件之间传值，参考https://segmentfault.com/a/1190000010913794。更多详情查看官网：cn.vuejs.org/v2/guide/re…

父组件

<template>
  <div>
    <component :my-data="items" :is="currentView"></component>
  </div>
</template>

<script>
import child from './child'
export default {
  data () {
    return {
      items: [1, 2, 3, 4],
      currentView: child
    }
  }
}
</script>
复制代码

一.基本用法

子组件 child.js

export default {
  props: {
    myData: Array
  },
  render: function (createElement) {
    return createElement('h3', this.myData)
  }
}
复制代码

注： 第一个标签参数为必填项

<figure>[图片上传中...(image-e4a43d-1543413213894-8)]

<figcaption></figcaption>

</figure>

二.添加样式、方法

子组件 child.js

export default {
  props: {
    myData: Array
  },
  return createElement('h3', {
      'class': {
        foo: true,
        bar: false
      },
      style: {
        color: 'red',
        fontSize: '18px'
      },
      attrs: {
        id: 'my-data'
      },
      on: {
        click: this.handleClick
      }
      domProps: {
        innerHTML: this.myData
      }
  }),
  methods: {
    handleClick: function() {
        console.log(' I am data! ');
    }
  }
}
复制代码

<figure>[图片上传中...(image-c4c402-1543413213894-7)]

<figcaption></figcaption>

</figure>

或者也可以把内容放在外面

export default {
  props: {
    myData: Array
  },
  return createElement('h3', {
      'class': {
        foo: true,
        bar: false
      },
      style: {
        color: 'red',
        fontSize: '18px'
      }
  },this.myData)
}
复制代码

<figure>[图片上传中...(image-558bec-1543413213894-6)]

<figcaption></figcaption>

</figure>

三.数组循环输出

子组件 child.js

export default {
  let items = this.myData
  return createElement('div',
    Array.apply(null, { length: items.length }).map(function (item, index) {
        return createElement('h3', items[index])
    })
  )
}
复制代码

<figure>[图片上传中...(image-6638b8-1543413213894-5)]

<figcaption></figcaption>

</figure>

四.添加子元素

子组件 child.js

export default {
  return createElement('div', [// 由createElement函数构建而成的数组
    createElement('h1', '主标'), // createElement函数返回VNode对象
    createElement('h2', '副标')
  ])
}
复制代码

<figure>[图片上传中...(image-b689f0-1543413213894-4)]

<figcaption></figcaption>

</figure>

五. this.$slots用法

父组件

<template>
  <div>
    <component :my-data="items" :is="currentView">
      <h1 slot="header"><span>About Me</span></h1>
      <p>Here is some page content</p>
      <p slot="footer">Copyright 2016 Evan You</p>
      <p>If I have some content down here</p>
    </component>
  </div>
</template>

<script>
import child from './child'
export default {
  data () {
    return {
      items: [1, 2, 3, 4],
      currentView: child
    }
  }
}
</script>
复制代码

子组件 child.js

export default {
  const {header, footer} = this.$slots
  const body = this.$slots.default
  return createElement('div', [
    createElement('header', header),
    createElement('main', body),
    createElement('footer', footer)
  ])
}
复制代码

<figure>[图片上传中...(image-b34d3f-1543413213893-3)]

<figcaption></figcaption>

</figure>

六. v-model用法

父组件

<template>
  <div>
    <component :name="name" :is="currentView" @input="val=>name=val"></component>
    <div>你的名字是:{{name}}</div>
  </div>
</template>

<script>
import child from './child'
export default {
  data () {
    return {
      name: '',
      currentView: child
    }
  }
}
</script>
复制代码

子组件 child.js

export default {
  props: {
    name: String
  },
  render: function (createElement) {
    var self = this
    return createElement('input', {
      domProps: {
        value: this.name
      },
      on: {
        input: function (event) {
          self.$emit('input', event.target.value)
        }
      }
    })
  }
}
复制代码

<figure>[图片上传中...(image-77eb3f-1543413213893-2)]

<figcaption></figcaption>

</figure>

七.作用域插槽（获取子组件数据）

父组件

<template>
  <div>
    <child>
      <template scope="props">
        <span>{{props.text}}</span>
      </template>
    </child>
  </div>
</template>

<script>
import child from './child'
</script>
复制代码

子组件 child.js

export default {
  props: {
    name: String
  },
  render: function (createElement) {
    return createElement('div', [
      this.$scopedSlots.default({
        text: 'hello world!'
      })
    ])
  },
}
复制代码

<figure>[图片上传中...(image-4298da-1543413213892-1)]

<figcaption></figcaption>

</figure>

八. 子组件之间传递作用域插槽

父组件

<template>
  <div>
    <child></child>
  </div>
</template>

<script>
import child from './child'
</script>
复制代码

子组件 child.js

import Vue from 'vue'
export default {
  render: function (createElement) {
    return createElement('div', [
      createElement('children', {
        scopedSlots: {
          default: function (props) {
            return [
              createElement('span', '来自父组件'),
              createElement('span', props.text)
            ]
          }
        }
      })
    ])
  }
}
Vue.component('children', {
  render: function (createElement) {
    return createElement('b',
    this.$scopedSlots.default({
      text: '我是子组件'
    }))
  }
})
复制代码

<figure>[图片上传中...(image-aef571-1543413213892-0)]

<figcaption></figcaption>

</figure>

九. 函数化组件

父组件

<template>
  <div>
    <child :data="data"></child>
  </div>
</template>

<script>
import child from './child'
export default {
  data () {
    return {
      data: {}
    }
  },
  components: {child},
  methods: {
    change: function (type) {
      if (type === 'img') {
        this.data = {
          type: 'img',
          url: 'https://raw.githubusercontent.com/iview/iview/master/assets/logo.png'
        }
      } else if (type === 'video') {
        this.data = {
          type: 'video',
          url: 'http://vjs.zencdn.net/v/oceans.mp4'
        }
      } else if (type === 'text') {
        this.data = {
          type: 'text',
          content: '这是一段纯文本'
        }
      }
    }
  },
  mounted: function () {
    this.change('img')
  }
}
</script>
复制代码

子组件 child.js

// 图片组件
var ImgItem = {
  props: ['data'],
  render: function (createElement) {
    return createElement('div', [
      createElement('p', '图片组件'),
      createElement('img', {
        attrs: {
          src: this.data.url
        }
      })
    ])
  }
}
// 视频组件
var VideoItem = {
  props: ['data'],
  render: function (createElement) {
    return createElement('div', [
      createElement('p', '视频组件'),
      createElement('video', {
        attrs: {
          src: this.data.url,
          controls: 'controls',
          autoplay: 'autoplay'
        }
      })
    ])
  }
}
// 纯文本组件 
var TextItem = {
  props: ['data'],
  render: function (createElement) {
    return createElement('div', [
      createElement('p', '纯文本组件'),
      createElement('p', this.data.text)
    ])
  }
}
export default {
  functional: true,
  render: function (createElement, context) {
    function getComponent () {
      var data = context.props.data
      switch (data.type) {
        case 'img':
          return ImgItem
        case 'video':
          return VideoItem
        default:
          return TextItem
      }
    }
    return createElement(
      getComponent(),
      context.data
      // context.children
    )
  }
  //在 2.3.0 或以上的版本中，你可以省略 props选项，所有组件上的特性都会被自动解析为 props。
  // props:{
  //    data:Object
  //}, 
}
复制代码

注： 在添加 functional: true 之后，锚点标题组件的 render 函数之间简单更新增加 context 参数，this.$slots.default 更新为 context.children，之后this.data 更新为 context.props.data

组件需要的一切都是通过上下文传递，包括：

  • props：提供所有 prop 的对象
  • children: VNode 子节点的数组
  • slots: 返回所有插槽的对象的函数
  • data：传递给组件的数据对象，作为 createElement 的第二个参数传入组件
  • parent：对父组件的引用
  • listeners: (2.3.0+) 一个包含了所有在父组件上注册的事件侦听器的对象。这只是一个指向 data.on 的别名。
  • injections: (2.3.0+) 如果使用了 inject 选项，则该对象包含了应当被注入的属性。

作者：十二柚不檬
链接：https://juejin.im/post/5bfcf70f51882512e76c64fb
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

barnett_y
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入理解vue Render函数
08-29
本文将深入探讨Vue Render函数的使用，包括如何处理条件渲染、列表渲染以及如何与组件交互。 ### 1. 条件渲染 (`v-if`的转化) 在Vue中，`v-if`指令用于根据条件控制元素的渲染。在`render`函数中，我们可以使用...
vue中render函数的使用详解
12-11
render函数 vue通过 template 来创建你的 HTML。但是，在特殊情况下，这种写死的模式无法满足需求，必须需要js的编程能力。此时，需要用render来创建HTML。 render方法的实质就是生成template模板； 通过调用一...
Vue-render函数的三个参数
weixin_34183910的博客
11-20 4051
render函数的第一个参数 第一个参数必选. 可选类型 string:html标签 object：一个含有数据选项的对象 function:返回一个含有数据选项的对象 Vue.component('child', { props: ['level'], render: function (createElement) { ...
vue3的渲染dom的实现
m0_62273246的博客
01-08 600
const h = (tag, props, children) => { return { tag, props, children } } const mount = (vnode, container) => { const el = vnode.el = document.createElement(vnode.tag); if(vnode.props) { for(const key .
render函数的理解和使用
u012576295的博客
08-11 1362
1、官方文档地址： https://cn.vuejs.org/v2/guide/render-function.html 2、简单理解 使用js生成需要的响应式的html代码 3、简单demo header组件 引用： 输出： 解释： 网页出现的header标签就是header组件中，使用render函数的createElement方法创建的。 4、render函数中使用v-model render组件 引用： 效果： 解释： domPro...
vue Render函数进阶
热门推荐
wngzhem的博客
01-10 3万+
vue Render函数进阶
iview table控件在render函数里设置DOM属性值的方法
Queen-Shir的博客
01-07 824
columns:[ { title: '员工头像', key: 'a', render:(h,params) =>{ return h('div',{ style: { width: '100%', height:"120px", display: "flex","justify-content": "flex-start","align-it.
props,ref,emit,render使用
qq_38504352的博客
04-10 193
1、在子组件获取父组件data值 props 格式：<组件名 :子组件props中变量=“父组件内容”></组件名t> template id="temp1"> <div> <div>{{parentMsg}}</div> </div> </template> 子组件： props:{ pare...
Vue中render函数的使用方法
12-29
render函数 vue通过 template 来创建你的 HTML。但是，在特殊情况下，这种写死的模式无法满足需求，必须需要js的编程能力。此时，需要用render来创建HTML。 什么情况下适合使用render函数 在一次封装一套通用按钮...
如何理解Vue的render函数的具体用法
12-29
本文介绍了如何理解Vue的render函数的具体用法，分享给大家，具体如下： 第一个参数(必须) – {String | Object | Function} <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> ...
何时/使用 Vue3 render 函数的教程详解
10-15
主要介绍了何时/使用 Vue3 render 函数的教程详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
浅谈Vue render函数在ElementUi中的应用
10-18
今天小编就为大家分享一篇浅谈Vue render函数在ElementUi中的应用，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue Render函数创建DOM节点代码实例
10-15
2. **条件渲染**：在 `render` 函数中，我们无法直接使用 `v-if` 或 `v-else` 指令。但是，我们可以根据条件返回不同的虚拟DOM树。例如，如果 `list` 不为空，就返回一个包含 `li` 元素的 `ul`；如果为空，则返回一...
浅谈Vue中render中的h箭头函数
01-19
vue2.0新增了render方法，官方案例写的是： render: h=>h(app) 其中h是由createElement方法演变而来 render: function(createElement){ return createElement(app) } 用es6的写法就是：(只有一个个return语句，...
浅析Vue 中的 render 函数
11-20
　简单的说，在vue中我们使用模板HTML语法组建页面的，使用render函数我们可以用js语言来构建DOM 　因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的...
Vue实例属性及其区别、三种模板、模板渲染
星河梦~的博客
01-10 761
Vue实例属性computed，methods，watch的用法及其区别，vue三种模板，vue模板渲染
iview 给render函数创建的标签添加属性，样式，点击事件，文本信息，自定义指，插槽
qwyio的博客
03-31 3846
渲染出一个标签，要怎么去添加这个标签的属性，样式，点击事件，以及文本信息？下面用一个element ui 组件的<el-button>按钮做一个简单的示例。 介绍： attrs domProps两者都可以去添加该元素的属性。下面的attrs也可以换成domProps，效果都是一样的。 用法： render: (h, params) => { return h("div", [ h("el-button", { attrs: { .
Vue 中的 Render 全面详解 (渲染函数 & JSX)
小太阳的博客
11-03 2万+
Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。简单的说，在 Vue 中我们使用模板 HTML 语法组建页面的，使用 Render 函数我们可以用 Js 语言来构建 DOM。因为 Vue 是虚拟 DOM，所以在拿到 Template 模板时也要转译成 VNode 的函数，而用 Render 函数构建 DOM，Vue 就免去了转译的过程。
vue中的render函数（通俗、易懂）
m0_59722204的博客
09-17 1万+
关于vuecli创建项目常见的render函数解析。
vue中render函数详解
最新发布
03-25
在 render 函数中，通过编写 JavaScript 代码来生成 DOM 元素，可以使用条件判断、循环语句等，从而实现更加灵活的组件渲染。 例如，下面是一个简单的 render 函数： ```javascript render (createElement) { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值