The render function was used at the beginning of the last article, but we didn’t use it in the intermediate article, so let’s take a look at how to use the render function for the final optimization in the advanced article:

  • Advanced, use the Render function to create your own Mosaic.

CreateElement Render Render option with h function

  • Specify what the component displays: new Vue({options})

    • The EL option finds the container through a selector, and the contents of the container are the contents of the component
    • The template option,<div> Component contents </div>As component content
    • The render option, which is a function that returns the default createElement function (h), which creates the structure, and the render function returns the render as component content. It has a higher priority.
//import App from './App.vue' //new Vue({ // render:h=>h(App) //}).mount('#app') // h() =====> createElement() // h(App) =====> create HTML structure according to APP component // render returns HTML structure, render to # APP container // h() function argument, 1. Node name 2. Properties | data object is 3. Child nodesCopy the code

1)shop-bread-item.vue

<template>
  <div class="shop-bread-item">
    <RouterLink v-if="to" :to="to"><slot /></RouterLink>
    <span v-else><slot /></span>
-    <i class="iconfont icon-angle-right"></i>
  </div>
</template>
Copy the code

2)shop-bread.vue

<script> import {h} from 'vue' export default {name: 'ShopBread', render () {// // 4. H first parameter tag name second parameter tag attribute object third parameter child node // requirement // 1. Create shop-bread parent container // 2. Remove the I tag from the xtx-shop-item component because it is organized by the render function. The last item is not labeled with I. // 5. Const items = this.$slots.default() const dymanicItems = [] items. ForEach ((item, i) => { dymanicItems.push(item) if (i < (items.length - 1)) { dymanicItems.push(h('i', { class: 'iconfont icon-angle-right' })) } }) return h('div', { class: 'shop-bread'}, dymanicItems)}} </script> <style lang='less'> Shop-bread {display: flex; padding: 25px 10px; &-item { a { color: #666; transition: all .4s; &:hover { color: @xtxColor; } } } i { font-size: 12px; margin-left: 5px; margin-right: 5px; line-height: 22px; // &:last-child {// display: none; // } } } </style>Copy the code

Use the code

<! </ShopBreadItem> </ShopBreadItem> </ShopBreadItem ="/category/1005000"> </ShopBreadItem> </ShopBread>Copy the code

  • Summary, the knowledge point

    • Render is a vue render function that takes precedence over el,template, etc., to provide component structure.

    • Note:

      • The vue2.0 render function provides the render(h){} function to create nodes
      • Vue3.0 functions are provided directly by VUE and need to be imported on demandimport { h } from 'vue'

    • This.$slots.default() gets the node structure of the default slot and splices the structure as required.

    • H function of ginseng tag tag name | component name, props tags | component attribute, the node child nodes | multiple nodes

    • Specific reference: render

  • Note: Do not write comments in the shop-bread component slot, it will also be parsed to improve the user experience

Based on JSX

<script> // import { h } from 'vue' export default { name: 'ShopBread', render () {// vue2's render function takes h as its argument // vue3's render function takes h as its import // createElement( // console.dir(this.$slots.default()) // Get all the slots of the ShopBread component and fill them with component instances const items = this.$slots.default() const Results = [] items.foreach ((item, index) => {results.push(item) // const iTag = h(' I ', {class: 'iconfont icon-angle-right' }) if (index < items.length - 1) { // results.push(iTag) results.push(<i className='iconfont // return h('div', {class:}) // return h('div', {class:}) 'shop-bread' }, results) return <div className='shop-bread'>{results}</div> } } </script>Copy the code

About the JSX:

  1. JSX is all about writing HTML tags directly in JS code
  2. Dynamic values inserted in the tag use a single curly brace (interpolation)
  3. The class name needs to be className