Vue中render开发的示例分析-创新互联
这篇文章给大家分享的是有关Vue中render开发的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
场景
官网描述的场景当我们开始写一个通过 level prop 动态生成 heading 标签的组件，你可能很快想到这样实现：
<script type="text/x-template" id="anchored-heading-template"> <h2 v-if="level === 1"> <slot></slot> </h2> <h3 v-else-if="level === 2"> <slot></slot> </h3> <h4 v-else-if="level === 3"> <slot></slot> </h4> <h5 v-else-if="level === 4"> <slot></slot> </h5> <h6 v-else-if="level === 5"> <slot></slot> </h6> <h7 v-else-if="level === 6"> <slot></slot> </h7> </script>
Vue.component('anchored-heading', {
template: '#anchored-heading-template',
props: {
level: {
type: Number,
required: true
}
}
})在这种场景中使用 template 并不是最好的选择：首先代码冗长，为了在不同级别的标题中插入锚点元素，我们需要重复地使用 <slot></slot>。
虽然模板在大多数组件中都非常好用，但是在这里它就不是很简洁的了。那么，我们来尝试使用 render 函数重写上面的例子：
Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(
'h' + this.level, // tag name 标签名称
this.$slots.default // 子组件中的阵列
)
},
props: {
level: {
type: Number,
required: true
}
}
})简单清晰很多！简单来说，这样代码精简很多，但是需要非常熟悉 Vue 的实例属性。在这个例子中，你需要知道当你不使用 slot 属性向组件中传递内容时，比如 anchored-heading 中的 Hello world!，这些子元素被存储在组件实例中的 $slots.default中。
createElement参数介绍
接下来你需要熟悉的是如何在 createElement 函数中生成模板。这里是 createElement 接受的参数：
createElement(
// {String | Object | Function}
// 一个 HTML 标签字符串，组件选项对象，或者
// 解析上述任何一种的一个 async 异步函数，必要参数。
'div',
// {Object}
// 一个包含模板相关属性的数据对象
// 这样，您可以在 template 中使用这些属性。可选参数。
{
// (详情见下一节)
},
// {String | Array}
// 子节点 (VNodes)，由 `createElement()` 构建而成，
// 或使用字符串来生成“文本节点”。可选参数。
[
'先写一些文字',
createElement('h2', '一则头条'),
createElement(MyComponent, {
props: {
someProp: 'foobar'
}
})
]
)深入 data 对象
有一件事要注意：正如在模板语法中，v-bind:class 和 v-bind:style ，会被特别对待一样，在 VNode 数据对象中，下列属性名是级别最高的字段。该对象也允许你绑定普通的 HTML 特性，就像 DOM 属性一样，比如 innerHTML (这会取代 v-html 指令)。
{
// 和`v-bind:class`一样的 API
'class': {
foo: true,
bar: false
},
// 和`v-bind:style`一样的 API
style: {
color: 'red',
fontSize: '14px'
},
// 正常的 HTML 特性
attrs: {
id: 'foo'
},
// 组件 props
props: {
myProp: 'bar'
},
// DOM 属性
domProps: {
innerHTML: 'baz'
},
// 事件监听器基于 `on`
// 所以不再支持如 `v-on:keyup.enter` 修饰器
// 需要手动匹配 keyCode。
on: {
click: this.clickHandler
},
// 仅对于组件，用于监听原生事件，而不是组件内部使用
// `vm.$emit` 触发的事件。
nativeOn: {
click: this.nativeClickHandler
},
// 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
// 赋值，因为 Vue 已经自动为你进行了同步。
directives: [
{
name: 'my-custom-directive',
value: '2',
expression: '1 + 1',
arg: 'foo',
modifiers: {
bar: true
}
}
],
// Scoped slots in the form of
// { name: props => VNode | Array<VNode> }
scopedSlots: {
default: props => createElement('span', props.text)
},
// 如果组件是其他组件的子组件，需为插槽指定名称
slot: 'name-of-slot',
// 其他特殊顶层属性
key: 'myKey',
ref: 'myRef'
}条件渲染
既然熟读以上api接下来咱们就来点实战。
之前这样写
//HTML
<div id="app">
<div v-if="isShow">我被你发现啦！！！</div>
</div>
<vv-isshow :show="isShow"></vv-isshow>
//js
//组件形式
Vue.component('vv-isshow', {
props:['show'],
template:'<div v-if="show">我被你发现啦2！！！</div>',
});
var vm = new Vue({
el: "#app",
data: {
isShow:true
}
});render这样写
//HTML
<div id="app">
<vv-isshow :show="isShow"><slot>我被你发现啦3！！！</slot></vv-isshow>
</div>
//js
//组件形式
Vue.component('vv-isshow', {
props:{
show:{
type: Boolean,
default: true
}
},
render:function(h){
if(this.show ) return h('div',this.$slots.default);
},
});
var vm = new Vue({
el: "#app",
data: {
isShow:true
}
});列表渲染
之前是这样写的，而且v-for 时template内必须被一个标签包裹
//HTML
<div id="app">
<vv-aside v-bind:list="list"></vv-aside>
</div>
//js
//组件形式
Vue.component('vv-aside', {
props:['list'],
methods:{
handelClick(item){
console.log(item);
}
},
template:'<div>\
<div v-for="item in list" @click="handelClick(item)" :class="{odd:item.odd}">{{item.txt}}</div>\
</div>',
//template:'<div v-for="item in list" @click="handelClick(item)" :class="{odd:item.odd}">{{item.txt}}</div>',错误
});
var vm = new Vue({
el: "#app",
data: {
list: [{
id: 1,
txt: 'javaScript',
odd: true
}, {
id: 2,
txt: 'Vue',
odd: false
}, {
id: 3,
txt: 'React',
odd: true
}]
}
});render这样写
//HTML
<div id="app">
<vv-aside v-bind:list="list"></vv-aside>
</div>
//js
//侧边栏
Vue.component('vv-aside', {
render: function(h) {
var _this = this,
ayy = this.list.map((v) => {
return h('div', {
'class': {
odd: v.odd
},
attrs: {
title: v.txt
},
on: {
click: function() {
return _this.handelClick(v);
}
}
}, v.txt);
});
return h('div', ayy);
},
props: {
list: {
type: Array,
default: () => {
return this.list || [];
}
}
},
methods: {
handelClick: function(item) {
console.log(item, "item");
}
}
});
var vm = new Vue({
el: "#app",
data: {
list: [{
id: 1,
txt: 'javaScript',
odd: true
}, {
id: 2,
txt: 'Vue',
odd: false
}, {
id: 3,
txt: 'React',
odd: true
}]
}
});v-model
之前的写法
//HTML
<div id="app">
<vv-models v-model="txt" :txt="txt"></vv-models>
</div>
//js
//input
Vue.component('vv-models', {
props: ['txt'],
template: '<div>\
<p>看官你输入的是:{{txtcout}}</p>\
<input v-model="txtcout" type="text" />\
</div>',
computed: {
txtcout:{
get(){
return this.txt;
},
set(val){
this.$emit('input', val);
}
}
}
});
var vm = new Vue({
el: "#app",
data: {
txt: '',
}
});render这样写
//HTML
<div id="app">
<vv-models v-model="txt" :txt="txt"></vv-models>
</div>
//js
//input
Vue.component('vv-models', {
props: {
txt: {
type: String,
default: ''
}
},
render: function(h) {
var self=this;
return h('div',[h('p','你猜我输入的是啥：'+this.txt),h('input',{
on:{
input(event){
self.$emit('input', event.target.value);
}
}
})] );
},
});
var vm = new Vue({
el: "#app",
data: {
txt: '',
}
});感谢各位的阅读！关于“Vue中render开发的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
本文标题：Vue中render开发的示例分析-创新互联
分享路径：https://www.cdcxhl.com/article42/djjsec.html
成都网站建设公司_创新互联，为您提供定制开发、App开发、App设计、外贸网站建设、网站制作、外贸建站
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联
- 做网站优化时，影响网站文章质量的五大因素 2016-11-09
- 做网站关于功用方面的规划 2021-08-15
- 网站建设公司这么多，企业做网站该怎么选？ 2022-06-24
- 深圳网站建设做网站的时候有些错误要避免 2022-06-27
- 做网站要怎么规划才好？ 2022-08-09
- 深圳做网站---解说做百度竞价排名服务的作用 2022-06-13
- 企业做网站建设有哪些问题需要了解？ 2023-01-02
- 做网站SEO需要持续的进行 2016-09-05
- 中小企业为什么要做网站 2022-04-07
- 做网站后续维护工作怎样进行 2022-10-25
- 做网站建设哪些基础要求必须满足？ 2020-11-29
- 新手怎么做网站呢？利用这两种方法就足够！ 2022-05-15