文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue框架render方法如何替换template

2024-04-02 19:55

关注

render方法替换template

使用template属性创建组件模板

import Vue from 'vue'
 
const Item = Vue.component('Item', {
  template: `<div>
                <h2>子组件</h2>
                <slot></slot>
              </div>`
})
const app = new Vue({
  el: '#app',
  template: `<div ref="myDiv">              <item ref="item">
                <p ref="p">this is a slot</p>
              </item>
            </div>`,
 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: '<span>注意:添加该属性会把后面的子节点覆盖</span>'
        // },
        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(主入口文件)

<template>
    <ParentCmp />
</template>
<script>
import ParentCmp from './ParentCmp';
export default {
    components: {
        ParentCmp
    },
}
</script>

ParentCmp.vue (template写法)

<template>
    <div>
        <h1>我是parent组件</h1>
        <hr />
        <User style="background: #ccc" text="我是传入的文本">
            <template v-slot:header>
                <p>这是名字为header的slot</p>
            </template>
            <p>这是填充默认slot数据</p>
            <template v-slot:footer>
                <p>这是名字为footer的slot</p>
            </template>
            <template v-slot:item="props">
                <p>名字为item的作用域插槽。显示数据{{props}}</p>
            </template>
            <template v-slot:list="props">
                <p>名字为list的作用域插槽。显示数据{{props}}</p>
            </template>
        </User>
    </div>
</template>
<script>
import User from './User'
export default {
    components: {
        User
    },
    props: {},
    data() {
        return {}
    },
    methods: {}
}
</script>

User.vue (template写法)

<template>
    <div>
        <h4>{{text}}</h4>
        <slot name="header"></slot>
        <slot>默认的user slot</slot>
        <slot name="footer"></slot>
        <slot name="item" v-bind="item">item作用域插槽,展示姓名 {{item.name}}</slot>
        <slot name="list" v-bind="{list}">list作用域插槽</slot>
    </div>
</template>
<script>
export default {
    props: {
        text: String
    },
    data() {
        return {
            item: {
                name: '张三',
                age: 28,
                works: '前端、后端、设计、产品'
            },
            list: ['a','b','c']
        }
    }
}
</script>

ParentCmp.js (render写法)

import User from './User'
export default {
    props: {},
    data() {
        return {}
    },
    methods: {},
    render(h) {
        return h('div',[
            h('h1', '我是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写法
        
    }
}

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('h4', this.text),
            this.getSlot('header'),
            this.$slots.default,
            this.getSlot('footer'),
            this.getSlot('item', this.item),
            this.getSlot('list', {list: this.list}),
        ])
        // jxs写法
        
    }
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯