Shulou(Shulou.com)05/31 Report--

本篇内容介绍了"vue框架render方法怎么替换template"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读，能够学有所成!

render方法替换template使用template属性创建组件模板import Vue from 'vue' const Item = Vue.component('Item', { template: ` 子组件 `})const app = new Vue({ el: '#app', template: ` this is a slot

`, data: { count: 0 }, components: { Item }})把父组件的template创建换成使用render方法创建const app = new Vue({ el: '#app', data: { count: 0 }, render (createElement) { return createElement( 'div', { ref: 'myDiv', // domProps: { // innerHTML: '注意：添加该属性会把后面的子节点覆盖' // }, attrs: { id: 'test-id', title: 'test-title' } }, [ createElement('item', { ref: 'item' }, [ createElement('p', { ref: 'p' }, 'this is a slot') ]) ]) }, components: { Item }})

1.如上面更改后的代码，render方法内传入createElement函数,接下来使用createElement函数来创建节点。

2.函数方法格式 createElement('节点或组件名称'， {节点属性}, [子节点])

3.先创建一个div元素, 内部包含ref='myDiv'的属性, 使用数组存放其子节点

4.数组内子节点是 item组件, 属性是 ref="item", 其子节点为p， 依次类推逐层创建子节点, 最后的文本节点使用字符串或变量即可，无需再用[]包含。

template和render用法对比

App.vue（主入口文件）

import ParentCmp from './ParentCmp';export default { components: { ParentCmp },}

ParentCmp.vue (template写法)

我是parent组件

这是名字为header的slot

这是填充默认slot数据

这是名字为footer的slot

名字为item的作用域插槽。显示数据{{props}}

名字为list的作用域插槽。显示数据{{props}}

import User from './User'export default { components: { User }, props: {}, data() { return {} }, methods: {}}

User.vue (template写法)

{{text}} 默认的user slot item作用域插槽，展示姓名 {{item.name}} list作用域插槽 export default { props: { text: String }, data() { return { item: { name: '张三', age: 28, works: '前端、后端、设计、产品' }, list: ['a','b','c'] } }}

ParentCmp.js (render写法)

import User from './User'export default { props: {}, data() { return {} }, methods: {}, render(h) { return h('div',[ h('h2', '我是parent组件'), h('hr'), h(User, { props: { text: '我是传入的文本' }, style: { background: '#ccc' }, // 作用域插槽写在scopedSlots里 scopedSlots: { item: props => h('p', `名字为item的作用域插槽。显示数据${JSON.stringify(props)}`), list: props => h('p', `名字为list的作用域插槽。显示数据${JSON.stringify(props)}`) } }, // 非作用域插槽写数组里 [ h('p', {slot: 'header'}, '这是名字为header的slot'), h('p', '这是填充默认slot数据'), h('p', {slot: 'footer'}, '这是名字为footer的slot'), ]) ]); // jxs写法 /* return ( 我是parent组件 (

名字为item的作用域插槽。显示数据{JSON.stringify(props)}

), list: props => (

名字为list的作用域插槽。显示数据{JSON.stringify(props)}

), } } > 这是名字为header的slot

这是填充默认slot数据

这是名字为footer的slot

); */ }}

User.js (render写法)

export default { props: { text: String }, data () { return { item: { name: '张三', age: 28, works: '前端、后端、设计、产品' }, list: ['a', 'b', 'c'] } }, methods: { getSlot (name, data) { if (this.$scopedSlots[name]) { return this.$scopedSlots[name](data); } else if (this.$slots[name]) { return this.$slots[name]; } return undefined; }, }, render (h) { return h('div', [ h('h5', this.text), this.getSlot('header'), this.$slots.default, this.getSlot('footer'), this.getSlot('item', this.item), this.getSlot('list', {list: this.list}), ]) // jxs写法 /* return ( {this.text} {this.getSlot('header')} {this.$slots.default} {this.getSlot('footer')} {this.getSlot('item', this.item)} {this.getSlot('list', {list: this.list})} ); */ }}"vue框架render方法怎么替换template"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.