函数化组件
Vue.js提供了一个functional的布尔值选项,设置为true可以使组件无状态和无实例,也就是没有data和this上下文。这样用render函数返回虚拟节点可以更容易渲染,因为函数化组件只是一个函数,渲染开销要小很多。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello VUE</title>
</head>
<body>
<div id="app">
<smart-item :data="data"></smart-item>
<button @click="change('img')">切换为图片组件</button>
<button @click="change('video')">切换为视频组件</button>
<button @click="change('text')">切换为文本组件</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
//图片组件选项
var ImgItem = {
//接收data
props:['data'],
render:function(createElement){
return createElement('div',[
createElement('p','图片组件'),
createElement('img',{
attrs:{
src:this.data.url
}
})
]);
}
};
//视频组件选项
var VideoItem = {
props:['data'],
render:function(createElement){
return createElement('div',[
createElement('p','视频组件'),
createElement('video',{
attrs:{
src:this.data.url,
controls:'controls',
autoplay:'autoplay'
}
})
]);
}
};
//纯文本组件选项
var TextItem = {
props:['data'],
render:function(createElement){
return createElement('div',[
createElement('p','纯文本组件'),
createElement('p',this.data.content)
]);
}
};
Vue.component('smart-item',{
//函数组件化
functional:true,
render:function(createElement,context){
//根据传入当然数据,判断显示哪种组件
function getComponent(){
var data = context.props.data;
if(data.type==='img') return ImgItem;
if(data.type==='video') return VideoItem;
return TextItem;
}
return createElement(
getComponent(),
{
props:{
//把smart-item的prop:data传给上面智能选择的组件
data:context.props.data
}
},
context.children
)
},
props:{
data:{
type:Object,
required:true
}
}
})
var app = new Vue({
el:'#app',
data:{
data:{}
},
methods:{
//切换不同类型组件的数据
change:function(type){
if(type==='img'){
this.data = {
type:'img',
url:'https://cn.vuejs.org/images/logo.png'
}
}else if(type==='video'){
this.data={
type:'video',
url:'https://player.youku.com/embed/XMzMwMTYyODMyNA==?autoplay=true&client_id=37ae6144009e277d'
}
}else if(type==='text'){
this.data = {
tyep:'text',
content:'这是一段文本'
}
}
}
},
created:function(){
//初始化时,默认设置图片组件的数据
this.change('img');
}
})
</script>
</body>
</html>
函数化组件主要适用于以下两个场景:
• 程序化地在多个组件 中 选择一个.
• 在将 children, props, data 传递给子组件之前操作它们.
JSX
为了让Render函数更好地书写和阅读,Vue.js提供了插件babel-plugin-transform-vue-jsx来支持JSX语法。
JSX是一种看起来像HTML,但实际是JavaScript的语法扩展,它用更接近DOM结构的形式来描述一个组件的UI和状态信息,最早在React.js里大量应用。代码无法直接运行 , 需要在 webpack 里配置插件 babel-plugin-transform-vue才SX 编译后才可以。