1. Render and createElement methods

   <myhead level="1" title="Warning message" >
      {{title}}
    </myhead>
    
    
    Vue.component('myhead', {
      props: {
        level: {
          type: String.required: true
        },
        title: {
          type: String.default: ' '}},//h is short for createElement creation method
      render(h) {
        const vnode = h(
          'h' + this.level , // Dynamic tags h1, H2,h3
          {attrs: {title: this.title}}, // Dynamically set prop
          this.$slots.default // Get the contents of the slot
        )
        return vnode // VNode is returned each time through the h method}})Copy the code

2. Nested rendering

    .myClass p{
      color: red;
      border: 1px solid red;
    }
    .myClass img{
      width: 30px;
      height: 30px; 
    } 
<mysection class="myClass" title="Warning message" imgurl="http://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"> Test contents </ mySection >// Note: data-title, class, and style are non-prop properties. They are added to the root element of the component without the need to define a prop
Vue.component('mysection', {
      props: {
        title: {
          type: String.default: ' '
        },
        imgurl: {// Be careful not to use the hump notation
          type: String.default: ' '
        }, 
         class: {
          type: String.default: ' '}},render(h) { 
        let children = []  
        // Insert child nodes first
        children.push(h(
            'p'[this.$slots.default[0],  h('img', { attrs: { 'src' : imgurl } })] 
          ))
        // Insert the main message again
        const vnode = h(
          'div',
          {attrs: {title: title,'class': class}},
          children
        )
        return vnode}})Copy the code

Functional components

Definition:

The component has no lifecycle methods, does not manage any state, and does not listen for any state that is passed to it. You can define it as a functional component, which has no state component (no responsiveness) and no instance, and cannot access the context with thisCopy the code

<mysection class="myClass" title="Warning message" imgurl="http://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"> Test contents </ mySection >//style="color:red;" Class ="myClass" style and class are not passed on

Vue.component('mysection', {
      functional:true.props: {
        title: {
          type: String.default: ' '
        },
        imgurl: {
          type: String.default: ' '}},render(h,context) { // Get props information from the context passed in
        let {title,imgurl} = context.props
        let children = []  
        // Insert child nodes first
        children.push(h(
            'p', 
            [context.children[0],  h('img', { attrs: { 'src' :imgurl } })] 
          ))
        // Insert the main message again
        const vnode = h(
          'div',
          {attrs: {title: this.title}},
          children
        )
        return vnode
      }
    })
Copy the code