正文
vuejs关于函数式组件的探究
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
所以,在控制台里app1.exist 或app2.exist都可以控制是否显示字母.
<!DOCTYPE html>
<html lang='zh'>
<head>
<title>TEST</title>
</head><body> <div id="app1">
<non-func :c_exist="exist"></non-func>
</div>
<div id="app2">
<is-func :c_exist="exist"></is-func>
</div><script src="https://cdn.staticfile.org/vue/2.1.6/vue.min.js"></script>
<script>var render1 = function (h) {
var children = []
if (this.c_exist) {
children.push('Non-functional component')
}
return h('div', {}, children)
}
Vue.component('non-func',{
render :render1,
props:['c_exist'],
})
var app1 = new Vue({
el : '#app1',
data : {
exist:true,
},
})// functional component
var render2 = function (h, ctx) {
console.log(ctx)
var children = []
if (ctx.data.attrs.c_exist) {
children.push('functional component')
}
return h('div', {}, children)
}
Vue.component('is-func',{
functional: true,
render :render2,
})var app2 = new Vue({
el : '#app2',
data : {
exist:true,
},
})</script></body>
</html>
这样也可以:
var render2 = function (h, ctx) {
console.log(ctx)
var children = []
if (ctx.props.c_exist) {
children.push('functional component')
}
return h('div', {}, children)
}
Vue.component('is-func',{
functional: true,
render :render2,
props:['c_exist'],
})var app2 = new Vue({
el : '#app2',
data : {
exist:true,
},
})
