Render函數的用法及理解

漸進式的理解和使用Render

<!-- <template>
  <div class="container">
      <h1>1</h1>
  </div>
</template> -->
 <!-- 這里就不需要上面的 模板方式，直接通過render函數來生成組件 --->
<script>
export default {
  data () {
    return {

    }
  },
  components: {

  },

  render(createElement){
      //第一個參數：可傳標簽/組件名，第二個參數：選項，第三個子元素
      return createElement('h1',{},'Hello Render')
  } 
}  
</script>

<style scoped>

</style>

render的內容1：

  render(createElement){
    //加點變化
    let obj = {
      style:"color:#CCCCCC;border:1px solid red",
    }
      //第一個參數：可傳標簽/組件名，第二個參數：選項，第三個子元素
      return createElement('h1',obj,'Hello Render')
  }

render的內容2：

   props:{
         tag:String //假設傳遞一個 h2
    },
    render(createElement){
        
      //第一個參數：可傳標簽/組件名，第二個參數：選項，第三個子元素
      return createElement(this.tag,{},'Hello Render')
  }

調用的是時候

 

 效果：

 

render內容3：

<!-- <template>
  <div class="container">
      <h1>1</h1>
  </div>
</template> -->
 <!-- 這里就不需要上面的 模板方式，直接通過render函數來生成組件 --->
<script>
export default {
  data () {
    return {
      people:['蓋倫','韓信','慌子']
    }
  }, 
  props:{
        tag:String //假設傳遞一個 ul的例子
  },
  render(createElement){ 
      //第一個參數：可傳標簽/組件名，第二個參數：選項，第三個子元素
      return createElement(this.tag,{},this.people.map(name=>createElement('li',{},`${name}`)))
  }
}  
</script>

<style scoped>

</style>

頁面調用

 效果好的不行

 

render內容4：第二個參數加內容

<!-- <template>
  <div class="container">
      <h1>1</h1>
  </div>
</template> -->
 <!-- 這里就不需要上面的 模板方式，直接通過render函數來生成組件 --->
<script>
export default {
  data () {
    return {
      people:['蓋倫','韓信','慌子']
    }
  }, 
  props:{
        tag:String //假設傳遞一個 ul的例子
  },
  render(createElement){ 
      //第一個參數：可傳標簽/組件名，第二個參數：選項，第三個子元素
      return createElement(this.tag,{},this.people.map(name=>createElement('li',{attrs:{class:'Te'},on:{
        click:()=>{
          console.log(`${name}被點擊！！！`);
        }
      }},`${name}`)))
  }
}  
</script>

<style scoped>
.Te{
  color: red;
}
</style>

效果

樣式和點擊事件都被加上了

 

 

render內容5：render第一個參數除了標簽，還可以是一個組件

Test.vue組件內容

<template>
  <div>傳過來的內容 → {{msg}}</div>
</template>

<script>
export default {
  props:{
    msg:String
  },
  data () {
    return {
    }
  },

}
</script>

使用組件的內容

<script>
import Test from './Test.vue'
export default {
  
  render(createElement){ 
      //第一個參數：可傳標簽/組件名，第二個參數：選項，第三個子元素
      return createElement(Test,{props:{
        msg:'Hello 幽冥狂_七'
      }})
  }
}  
</script>

<style scoped>
.Te{
  color: red;
}
</style>

效果如何：

Render內容6：Render的妙用

AnchoredHeading.vue 文件內容

<!-- <template>
  <h1>
      <a href="#hello-youmingkuang">你好，幽冥狂_七</a>
  </h1>
</template>
-->
<script>
export default {
    props:{
        level:Number
    },
    name:"AnchoredHeading",
    render(createElemenet){
        return createElemenet('h'+this.level,{attrs:{
            href:'#hello-youmingkuang'
        }},'你好,幽冥狂_七')
    }
}
</script>

<style scoped>

</style>

 

效果圖

 

 這些有點過於繁瑣，能不能在優化一下，看下面

新建一個 `AnchoredHeading.js` 文件

export default{
    props:{
        level:Number
    },
    render(h){ //h 就是createElement
        return h('h'+this.level,this.$slots.default) //this.$slots.default 存放slot的值
    }
}

引用 js 文件

 效果