通过render的形式来vue组件

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_40816649/article/details/100067029

template的形式创建的组件相对于render形式创建的组件来说局限性大一点，render形式创建的组件能很好地展现js的能力。
直接上代码

<script>
export default {
  name: 'renderComponent',
  props: {
    componentProps: String
  },
  data() {
    return {
      componentMsg: 'componentMsg'
    }
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
  },
  //通过render创建组件而不是通过template。没有:绑定参数的操作而是直接{}绑定参数
  render(h) {
    console.log('render')
    return(
      <div class="renderComponent">
        <div class="renderComponentred">
          {this.componentMsg}  
        </div>
        <input v-model={this.componentProps}/>
        {//创建新的div节点并且绑定对应的class和style和slot插槽
          h(
            'div',
            { 
              class: [
                !this.componentProps ? 'font-big' : '', 
                this.componentProps ? 'font-weight' : ''
              ],
              style: { color: 'green' }
            },
            this.$slots.a
          )
        }
        <div id="yellow">
          {this.componentProps}
        </div>
        {
          h(
            'div',
            { 
              'class': 'font-small',
              style: { color: 'pink' }
            },
            this.$slots.b
          )
        }
      </div>
    )
  }
}
</script>>

render中同样可以定义data绑定class和style加入插槽等等功能，还有生命周期其中的顺序如下

render是介于beforemounted和mounted之前的。
绑定data数据的时候要使用this，以及双花括号绑定现在也变成了单花括号。
render最后必须返回一个用()包起来的且只有一个根div的html模板。

引用

import renderComponent from './components/renderComponent.vue'
 components: {
    renderComponent
  },

<renderComponent componentProps="传给子组件的字符串">
      <div slot="a">1111111111</div>
      <div slot="b">2222222222</div>
    </renderComponent>

end！！！