render函数拓展

2022-06-10 00:02:48 阅读：129 来源： 互联网

标签：src return 函数 render url 拓展 props 组件

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

render函数拓展