render函数拓展

1，我们需求<Example :tags="['h1','h2','h3']"></Example>能够生成

<div>
    <h1>0</h1>
    <h2>1</h2>
    <h3>2</h3>
</div>

此时我们可以自定义render函数渲染

  <script src="./vue.js"></script>
  <div id="app">
    <Example :tags="['h1','h2','h3']"></Example>
  </div>
  <script>
    Vue.component('Example',{//注册组件
      props:['tags'],
      render(h){
        const children = this.tags.map((item,i)=>h(item,{attrs:{class: 'box'}},i))
        return h('div',children)
      }
    })
    new Vue({el:'#app'})
  </script>

 

2.高阶组件：在原有组件上进行加强扩展

我们需要一个动态渲染头像的组件，调用不同的api生成不同的头像

初始组件可以是

 const Avatar = {//定义组件     props:['src'],     template:'<img :src="src">'   } 只有一个src属性和img元素，此时我们可以在增强组件中加入api的调用获取头像赋值给该组件

<script>
  function fetchUrl(username, cb) {//获取图片函数
      setTimeout(() => {
        cb('./2.jpg')
      }, 500)
  }
  function withAvatarUrl(InnerComponent){//组件增强器
    return{
      props:['username'],//接收InnerComponent组件的props
      data(){
        return{
          url:'./1.jpg'//默认图片
        }
      },
      created(){
        fetchUrl(this.username,url=>{//获取api接口图片
          this.url=url
        })
      },
      render(h){
        return h(InnerComponent,{//渲染组件，动态更改src属性
          attrs:{src:this.url},
        })
      }
    }

  }
  const SmartAvatar = withAvatarUrl(Avatar)

  new Vue({
    el:'#app',
    components:{SmartAvatar}//注册组件
  })
</script>

初始给了一个url，模拟调用接口5毫秒之后获取到新的url赋值给url，最好在渲染的时候将url作为src属性传入。

标签：src,return,函数,render,url,拓展,props,组件
来源： https://www.cnblogs.com/lijun12138/p/16361659.html