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的调用获取头像赋值给该组件

<div id="app">

    <smart-avatar username="vuejs"></smart-avatar>

</div>

<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属性传入。

 

3.实现简单vuex状态管理

<div id="app">
   <Conter></Conter> 
   <Conter></Conter>
   <Conter></Conter>
   <button @click="add">add</button>
  </div>
  <script>
    function createStore({state,mutations}){//该函数返回vue实例实现vuex状态管理
      //实现
      return new Vue({
        data:{state},//将state数据变为响应式
        methods:{
          commit(mutationType) {
            mutations[mutationType](this.state)//获取mutation中add函数执行
          }
        }
      })
    }
    const store = createStore({
      state:{count:0},
      mutations:{
        add(state){
          state.count++
        }
      }
    })
    const Conter = {//定义组件
      render:h=>h('div',store.state.count)
    }
    new Vue({
      el:'#app',
      methods:{
        add(){
          // console.log(store)
          store.commit('add')//调用mutation中add函数
        }
      },
      components:{Conter}
    })
  </script>