求教vue2怎么用createElement动态创建DOM

Question

有一个按钮，根据 status 的值来创建，比如 status = 1 ,按钮名为 status1,跳转 A 页面
我想通过 createElemetn 来创建这个按钮

<template>
<div class="btn">...</div>
</template>
<script>
    export default{
        render:(createElement){
          return createElement(...按钮)  
        }
    }
</script>

我看了官网的介绍，好像是这样写，但是试了下没有用，不知道怎么玩了...

Answer 1

<template>

<order-btn :status="status"></order-btn>

</template>

<script>

import Vue from 'vue'
Vue.component('order-btn', {
  render:function(createElement){
      let self = this
        return createElement(
            'div',
            {
                on:{click:function(){
                    console.log('success')
                }},
            },
            self.order2Operate(self.status)
            )
    },
    props:{
        status
    },
    methods:{
        order2Operate(status){
            switch(status){
                case 1:
                    return "待付款"
                    break;
                case 2:
                    return "待成团"
                    break;
                case 3:
                    return "待发货"
                    break;
                case 4:
                    return "待收货"
                    break;
                case 5:
                    return "待评价"
                    break;
                default:
                    return "***"
            }
        }
    }
})

export default{
    data(){
        return{
            statue:[1,2,3,4,5]
        } 
    }
}

</script>

Answer 2

你这个其实可以这样想，你需要一个父组件

parent--->传递status的数值---->子组件
子组件的props，接收父组件传递过来的status数值
然后类似于这样来创建一个按钮

 props: {
            status: { type: Number }
        },
        render: function (h) {
            const _this = this
            return h('div', {
                on: {
                    'click': function (event) {
                        this.$router.push('页面地址')
                    },
                }
            }, _this.status)
        }

Answer 3

let message = new Vue.extend(require('./main.vue'));
document.body.appendChild(instance.vm.$el);

这样可以把vue的组件dom插入到body

Answer 4

最好别这样搞，会影响重新渲染性能。

最好用v-if或v-show来控制这个按钮的显隐