Vue.js进阶 render函数的妙用
2019-08-04 本文已影响0人
缺月楼
render函数初步了解
- template下只允许有一个子节点
小栗子：
<template id="hdom">
<div>
<h1 v-if="level==1">
<slot></slot>
</h1>
<h2 v-if="level==2">
<slot></slot>
</h2>
<h3 v-if="level==3">
<slot></slot>
</h3>
</div>
</template>
使用render函数就会省事很多：栗子进行对比：
<div id="app">
<child :level="level">
我是一个痴人
</child>
</div>
<template id="hdemo">
<div>
<h1 v-if="level==1">
<slot></slot>
</h1>
<h2 v-if="level==2">
<slot></slot>
</h2>
<h3 v-if="level==3">
<slot></slot>
</h3>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
// 自定义指令 使用Vue组件定义：
// Vue.component('child', {
// props: ['level'],
// template: `#hdemo`
// });
// 使用render函数定义
Vue.component("child", {
render: function(createElement) {
return createElement('h' + this.level, this.$slots.default)
},
props: ['level']
})
var app = new Vue({
el: '#app',
data: {
level: 3
}
})
</script>
render函数的第一个参数
在render函数的方法中，参数必须是createElement,createElement的类型是function
render函数的第一个参数可以是 String | Object | Function
小栗子：
<div id="app">
<child></child>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
Vue.component("child", {
// 第一个参数必选
// --- String --- html标签
// ---Object ---一个含有数据选项的对象
// ---Function ---方法返回含有数据选项的对象
render: function(createElement) {
// `createElement`的类型是`function`
alert(typeof createElement)
// String-- - html标签
// return createElement('div')
// Object 一个含有数据选项的对象
// return createElement({
// template: '<div>锄禾日当午</div>'
// })
var domFun = function() {
return {
template: '<div>锄禾日当午</div>'
}
}
return createElement(domFun())
},
props: []
})
var app = new Vue({
el: '#app',
data: {
}
})
</script>
render函数的第二个参数
小栗子：只列举四个
<div id="app">
<child></child>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
Vue.component("child", {
//第二个参数可选 第二个参数是数据对象 ----只能是Object
render: function(createElement) {
return createElement({
template: '<div>我是单身狗</div>'
}, {
// 引号引上最好 'class'
class: {
foo: true,
baz: false
},
style: {
color: 'red',
fontSize: '24px'
},
// 正常的html特性
attrs: {
id: 'fou',
src: 'abc'
},
// 用来写原生的DOM属性
domProps: {
innerHTML: '<span style="color:blue;font-size:25px;">我是黑色</span>'
}
})
},
props: []
})
var app = new Vue({
el: '#app',
data: {
}
})
</script>
render函数的第三个参数
第三个参数也是可选 , String | Array—作为我们构建函数的子节点来使用的
小栗子：
<div id="app">
<child></child>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
Vue.component("child", {
//第三个参数可选 可以是String 或者Array 代表子节点
render: function(createElement) {
return createElement('div', [
// 子节点
createElement('h1', '我是h1标签'),
createElement('h6', '我是h6标签')
])
}
})
var app = new Vue({
el: '#app',
data: {
}
})
</script>
this.$slots在render函数中的应用
第三个 参数存的就是VNODE
createElement(‘header’,header), 返回的就是VNODE
var header = this.$slots.header; //–这返回的内容就是含有VNODE的数组
小栗子：
<div id="app">
<my-component>
<p>锄禾日当午</p>
<p>何地何斜</p>
<h3 slot="header">我是标题</h3>
<h5 slot="footer">我是最后一段</h5>
</my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
// 第三个参数 存的就是VNODE createElement('header', header)返回的就是VNODE
Vue.component("my-component", {
render: function(createElement) {
// debugger 可以对下面的数据类型进行验证
var header = this.$slots.header; //返回的内容就是含有VNODE的数组
var main = this.$slots.default;
var footer = this.$slots.footer;
return createElement('div', [
// 虚拟节点
createElement('header', header),
createElement('main', main),
createElement('footer', footer)
])
},
})
var app = new Vue({
el: '#app',
data: {
}
})
</script>
在render函数中使用props传递数据
小栗子：相当经典：
<div id="app">
<button @click="switchshow">点击按钮切换</button> {{show}}
<my-component :show="show">
</my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
//点击按钮切换
Vue.component("my-component", {
props: ['show'],
render: function(createElement) {
var imgsrc;
if (this.show) {
imgsrc = 'img/1.jpg'
} else {
imgsrc = 'img/2.jpg'
}
return createElement("img", {
attrs: {
src: imgsrc
},
style: {
width: '600px',
header: '600px'
}
})
}
})
var app = new Vue({
el: '#app',
data: {
show: false
},
methods: {
switchshow: function() {
this.show = !this.show
}
},
})
</script>
v-model在render函数中的使用
小栗子：
<div id="app">
<!-- 普通方法 -->
<!-- <my-component :name="name" @input="showname"> -->
<!-- 用v-model实现 -->
<my-component :name="name" v-model="name">
</my-component>
<br> {{name}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
// 第三个参数 存的就是VNODE createElement('header', header)返回的就是VNODE
Vue.component("my-component", {
render: function(createElement) {
var self = this //指的就是当前的Vue实例
return createElement('input', {
domProps: {
value: self.name
},
on: {
input: function(event) {
// 此处的this值得是什么。。。
self.$emit('input', event.target.value)
}
}
})
},
props: ['name']
})
var app = new Vue({
el: '#app',
data: {
name: `JACK`
},
// methods: {
// showname: function(value) {
// this.name = value
// }
// }
})
</script>
作用域插槽在render函数中的使用
小栗子：
<div id="app">
<my-component>
<template scope="prop">
{{prop.text}}
</template>
</my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
Vue.component("my-component", {
render: function(createElement) {
// 相当于<div> <slot :text="text"></slot> </div>
return createElement("div", this.$scopedSlots.default({
text: '我是子组件传递的诗句',
mag: 'scopetext'
}))
},
})
var app = new Vue({
el: '#app',
data: {
},
})
</script>
render函数最后一个知识点，很少用了解即可！
函数化组件的应用
使用context的转变:content代表的是上下文对象
// this.text----context.props.text
//this.$slots.default-----context.children
functional: true,表示该组件无状态无实例
实践小栗子 ：
<div id="app">
<my-component value="西欧奥">
</my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
// 转变 this.text 相当于 content.props.text
// this.$slots.default-- -- - context.children
Vue.component("my-component", {
functional: true, //表示当前的Vue实例无状态，无实例
render: function(createElement, context) {
return createElement('button', {
on: {
click: function() {
console.log(context)
console.log(context.props.value)
console.log(context.parent)
alert(context.parent.msg)
// alert(this.value) undefind 此时的this指的是window对象
}
}
}, '点击我学习context')
},
proprs: ['value']
})
var app = new Vue({
el: '#app',
data: {
msg: '我是父组件的内容'
},
})
</script>
