Vue render函数

render函数使用

 

1.介绍：我们可以使用javascript动态的插件元素模板，不使用template使用js来创建

// child.vue
<script>
export default {

props: {
     myData: Array
},

  // render函数：第一个参数是html标签，或者是一个对象，或者是一个函数，第二个参数是元素的相关配置。

  render: function (h) {
    return h('h1', {

      // class属性
      'class': {
        foo: true,
        bar: false
      },

      // 组件的props
      props: {
        myData: Array
      },

      // style属性
      style: {
        color: 'yellow',
        fontSize: '24px'
      },

      // DOM属性
      domProps: {
        innerText: '点击我'
      },

      // 正常的html属性
      attrs: {
        id: 'foo'
      },

      // 给元素绑定事件
      on: {
        click: this.handleClick
      },

      key: '1',
      ref: 'div'

    })
  },

  methods: {
    handleClick () {
      alert('调用了我')
    }
  }
}
</script>




// parent.vue
<template>
  <div>
    <component
      :myData="items"
      :is="currentView"
    ></component>
  </div>
</template>

<script>
import child from './child'
export default {
  data () {
    return {
      items: [1, 2, 3, 4],
      currentView: child
    }
  },
  methods: {

  }
}
</script>

 

// child.vue

// 第三个参数可以创建子元素，第三个参数也可以是一个数组
// 在数组中创建元素，如果给父元素设置了innerHTML会把所有的子元素
// 覆盖掉
<script>
export default {
data () {
    return {
        arr: [12,45,67, 12,5]
    }
},
  render: function (h) {
    return h(
      'h1',
        {
            style: {
                background: 'green',
                fontSize: '24px'
            }
        },
        this.arr.map(item => {
           return h ('a', {
                style: {
                    color: 'red',
                    fontSize: '24px'
                },
            }, item)
        })
    )
}
}
</script>