虽然在render里使用createElement函数创建DOM节点不是很直观,但是在部分独立组件的设计中还是可以满足一些特殊需求的。一个简单的render示例如下:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <my-component :list="list"></my-component> </div> <script src="/UploadFiles/2021-04-02/vue.js">另外,由于v-if,v-else,v-show等指令都无法在render里使用,需要自己手动实现,拿常用的v-model举个栗子:
Vue.component('my-component', { data() { return { message: '' } }, render(createElement) { return createElement( 'div', [ createElement( 'input', { on: { input: e => this.message = e.target.value } } ), createElement('p', this.message) ] ) } })以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。