【Vue2】Vue.component 运行时直接编写,无需生成vue文件

87 阅读1分钟

场景前提

我们知道Vue.component使用直接注册组件,并在<template></template>里面直接使用的。但如果不是直接在<template></template>里面使用,而是根据组件名称自动渲染的页面呢

这个时候我们就可以直接通过Vue.componentrender方法来实现

render又有两种实现方式:

1、一种是基于vue官方文档的createElement方法实现

2、一种是直接返回jsx的方式实现的

使用

1、基于createElement方法实现

// test是需要添加到自动渲染页面的组件名称数组中
vue.component('test',{
    render(createElement){
        // button 是已注册过的组件
        return createElement('button',{
            on:{
                click:function(){
                    alert(123)
                }
            }
        })
    }
}

2、通过jsx方式实现

// test是需要添加到自动渲染页面的组件名称数组中
vue.component('test',{
    render(){
        // button 是已注册过的组件
        return (<button onClick={()=>{alert(123)}}></button>)
    }
}