Vue之Render函数【笔记】-包含【函数化组件】和【使用Render函数开发可排序的表格组件】的实例

虚拟节点:

两者的对比:

 

虚拟dom看起来就像一个标准的javaScript对象,它没有真正的dom结构。它是通过一些特定的方法,比如tag,attributes等来描述清楚一个dom的UI状态。

Vue2里面的vnode:

 主要类型:

 Render的主要方法

 

 

 组件写法:

注意:

如果Vnode作为组件,或者含有组件的slot,那么Vnode必须唯一。

错误示例:

1 ,组件使用两遍,是只能渲染出来一个的,因为组件发生了重复

2,slot包含了组件且重复。

解决的方法:

 在render中,没有的自定义属性,都要通过自己来完成。

 

 包括事件修饰符都可以自己实现

default是默认不具名slot,如果命名了则this.$slots.name

 

函数化组件:

其实使用的场景不多,作为一种解决办法,了解即可。

注:此处应为attrs 

 

 

使用Render函数开发可排序的表格组件:

【此处使用template来写会更简单可读,只做示例render的写法】

定义的样式:

 

 

ya

 父组件引用模板。

 简单定义数据:表头中定义变量来表示该列是否需要排序。

 模板中,定义要用到的表头和表格数据。props是原数据,因为要进行排序,避免原来的数据受到污染,所以定义变量去拷贝传过来的值。

 

 

定义排序类型为默认,定义索引去保存原本的索引顺序。

通过循环构造表格的行列数据。

 循环表头数据,如果设置了可排序,则增加排序的箭头按钮

 写排序的方法。

 当前效果:实现了表格的排序

 

 

增加一个可以新增数据的按钮,要求表格兼容,新增的数据按照当前的排序规则加到表格中去【而不是默认的头或尾】

 

监听data的变化,当它改变的时候,先重新拷贝值,然后过滤出当前的排序列,再根据排序列的排序规则重新排序

效果:可以看到新增的数据根据年龄倒叙插入正确位置。

 

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 以下是一道基于Vuerender函数的选择题: 假设你正在使用Vuerender函数来创建一个组件,以下哪个选项描述的是render函数中正确的组件定义方式? A. ``` render: function(h) { return h('div', { class: 'my-component' }, 'Hello World') } ``` B. ``` render: function(h) { return h('my-component', { class: 'my-component' }, 'Hello World') } ``` C. ``` render: function(h) { return h(MyComponent, { class: 'my-component' }, 'Hello World') } ``` D. ``` render: function(h) { return h('my-component', { class: 'my-component' }, [ h('span', 'Hello'), h('span', 'World') ]) } ``` 正确答案是C。在Vuerender函数中,正确的组件定义方式是使用组件的构造函数作为第一个参数,而不是字符串。因此,选项C使用了MyComponent作为第一个参数,这是一个Vue组件的构造函数,而不是一个字符串。选项A和D使用了字符串而不是组件构造函数。选项B使用组件构造函数,但将其作为字符串传递给了h函数,因此也是不正确的。 ### 回答2: 根据vue中的render函数,我们可以组件一个选择题组件。以下是一个示例: ``` // 选择题组件 const ChoiceQuestion = { props: { question: { type: String, // 问题文本 required: true }, choices: { type: Array, // 选项数组 required: true } }, render(h) { return h('div', [ h('p', this.question), // 渲染问题文本 this.choices.map(choice => { return h('label', [ h('input', { attrs: { type: 'radio' } }), choice // 渲染选项 ]) }) ]) } } ``` 在上述示例中,我们创建了一个ChoiceQuestion组件,它接受两个props:question和choices。使用render函数,我们将问题文本渲染为一个`<p>`元素,然后使用`this.choices.map`方法遍历选项数组,并将每个选项渲染为一个带有单选框的`<label>`元素。 使用该选择题组件时,可以像使用其他vue组件一样进行调用和传递props: ``` <template> <div> <ChoiceQuestion :question="questionText" :choices="choicesList" /> </div> </template> <script> import ChoiceQuestion from './ChoiceQuestion.vue' export default { components: { ChoiceQuestion }, data() { return { questionText: '以下哪个不是Vue的特性?', choicesList: ['响应式数据', '组件', '双向数据绑定', '函数式编程'] } } } </script> ``` 上述示例中的ChoiceQuestion组件将被渲染为一个具有选项和单选框的选择题。 ### 回答3: 题目:Vue中的render函数可以实现组件吗? 答案:是的,Vue中的render函数可以实现组件。 首先,Vue中的render函数是用来生成虚拟DOM的函数,它可以将模板代码编译成虚拟DOM,并且可以在编译过程中创建组件实例。 在使用render函数时,我们可以将组件视为一个函数函数的参数为创建虚拟DOM所需的数据,并且返回一个虚拟DOM对象。 以一个简单的选择题组件为例,我们可以使用render函数来实现: ```javascript const ChoiceQuestion = { render(h) { // h参数为createElement函数,用于创建虚拟DOM return h('div', [ h('h2', '请选择以下哪个选项:'), h('ul', [ h('li', '选项A'), h('li', '选项B'), h('li', '选项C'), h('li', '选项D'), ]) ]) } } ``` 在上述代码中,render函数接收一个参数h,即createElement函数,我们可以使用createElement函数来创建虚拟DOM,然后返回一个包含题目和选项的div元素。 使用组件时,只需要将其渲染到页面上即可: ```javascript new Vue({ el: '#app', render: h => h(ChoiceQuestion) }) ``` 通过上述代码,我们就可以将选择题组件,通过简单的调用render函数,即可生成相应的虚拟DOM,并将之渲染到页面上。 因此,根据Vue中的render函数,我们可以通过将组件视为一个函数的方式,实现组件。这样可以提高代码的可复用性,并且更好地组织和管理项目的代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值