vue之 render函数 入门篇

vue之 render函数 入门篇

render: function (createElement) {
	// createElement函数返回结果是VNode
	return createElement(
		tag, // 标签名称
		data, // 传递数据
		children // 子节点数组
	)
}

简单渲染一个 h1 标签

父组件
<template>
  <div>
    <Test title="我是title1"></Test>
  </div>
</template>

<script>
import Test from './com/Test.vue'
export default {
  name: 'Home',
  components: {
    Test
  },
}
</script>

子组件
<script>
export default {
  name: 'Test',
  props: {
    title: String
  },
  components: {},
  render: function(createElement) {
    return createElement(
      'h1', // 01：标签名
      {
        // 02:当前标签的样式
        style: {
          color: 'red',
          background: '#001'
        }
      },
      // 03：当前标签的 props渲染数据
      this.title
    )
  }
}
</script>
<style lang="scss" scoped></style>

• 效果
  
  

简单渲染一个 ul 与 li

父组件
<template>
  <div>
    Home
    <Test></Test>
  </div>
</template>

<script>
import Test from './com/Test.vue'
export default {
  name: 'Home',
  components: {
    Test
  },
  data() {
    return {}
  },
  methods: {}
}
</script>
<style lang="scss" scoped></style>


子
<script>
export default {
  name: 'Test',
  props: {
    title: String
  },
  components: {},
  data() {
    return {
      parent: 'ul',
      son: 'li',
      list: ['li-1', 'li-2', 'li-3']
    }
  },
  render: function(createElement) {
    return createElement(
      this.parent, // 01：标签名
      this.list.map(_ => {
        return createElement(this.son, _)
      })
    )
  }
}
</script>

默认插槽 与 具名插槽

父组件
<!--
描述：
  作者：xzl
  时间：05月16日132536
-->
<template>
  <div>
    Home
    <Test
      ><div name="header">我是header</div>
      我是默认插槽菜鸡
      <div>我是默认插槽2级菜鸡</div>
    </Test>
  </div>
</template>

<script>
import Test from './com/Test.vue'
export default {
  name: 'Home',
  components: {
    Test
  },
  data() {
    return {}
  },
  methods: {}
}
</script>
<style lang="scss" scoped></style>


子
<!--
描述：
  作者：xzl
  时间：05月25日133237
-->
<script>
export default {
  name: 'Test',
  props: {
    title: String
  },
  components: {},
  data() {
    return {}
  },

  render: function(createElement) {
    let _this = this['$options'].parent // 我这个是在 .vue 文件的 components 中写的，这样写才能访问this
    let _header = _this.$slots.header // $slots: vue中所有分发插槽，不具名的都在default里

    return createElement(
      // 1. 要渲染的标签名称：第一个参数【必需】
      'div',
      // 2. 1中渲染的标签的属性，详情查看文档：第二个参数【可选】
      {
        style: {
          color: '#333',
          border: '1px solid #ccc'
        }
      },
      // 3. 1中渲染的标签的子元素数组：第三个参数【可选】
      [
        createElement('div', _header), // createElement()创建的VNodes
        // 'text', // 文本节点直接写就可以
        this.$slots.default // 所有不具名插槽，是个数组
      ]
    )
  }
}
</script>
<style lang="scss" scoped></style>

• 效果