Vue。js组件提供了一个functional 开关,设置为真正的后,就可以让组件变为无状态,无实例的函数化组件。因为只是函数,所以渲染的开销相对来说,较小。
函数化的组件中的渲染函数,提供了第二个参数上下文作为上下文,数据、道具、槽,以儿童及家长都可以通过上下文来访问。
1示例
这里,我们用,功能函数化组件来实现一个智能组件。
html:
& lt; div id=坝τ谩北?
https://www.yisu.com/zixun/data=& lt; smart-component:“数据”祝辞& lt;/smart-component>
& lt;按钮@click=案谋?img)”在图片组件& lt;/button>
& lt;按钮@click=案谋洹?“视频”)在视频组件& lt;/button>
& lt;按钮@click=案谋?文本)”在文本组件& lt;/button>
& lt;/div>
js:
//图片组件设置
var imgOptions={
道具:“数据”,
呈现:函数(createElement) {
返回createElement (" div " (
createElement (“p”、“图片组件”),
createElement (img, {
attrs: {
src: this.data.url,
身高:300,
体重:400
}
})
]);
}
};//视频组件设置
var videoOptions={
道具:“数据”,
呈现:函数(createElement) {
返回createElement (" div " (
createElement (“p”、“视频组件”),
createElement(“视频”,{
attrs: {
src: this.data.url,
控制:“控制”,
播放:播放的
}
})
]);
}
};//文本组件设置
var textOptions={
道具:“数据”,
呈现:函数(createElement) {
返回createElement (" div " (
createElement (“p”、“文本组件”),
this.data.content createElement (“p”)
]);
}
};
Vue.component (smart-component, {//设置为函数化组件
功能:没错,
呈现:函数(createElement、上下文){
函数得到(){
var=https://www.yisu.com/zixun/context.props.data数据;
控制台。日志(“smart-component/类型:”+ data.type);//判断是哪一种类型的组件
开关(data.type) {
例“img”:
返回imgOptions;
案例的视频:
返回videoOptions;
案例的文本:
返回textOptions;
默认值:
控制台。日志(“数据类型不合法:”+ data.type);
}
}
返回createElement (
get (),
{
道具:{
数据:context.props.data
}
}，
context.children
）
}，
道具:{
数据:{
类型:对象,
要求:真正的
}
}
})
应用var=new Vue ({
埃尔:“#应用”,
数据:{
数据:{}
}，
方法:{
变化:函数(式){
控制台。日志(“输入类型:“+类型);
开关(类型){
例“img”:
这一点。data=https://www.yisu.com/zixun/{
类型:“img”,
url: http://pic-bucket.ws.126.net/photo/0001/2019-02-07/E7D8PON900AO0001NOS.jpg的
}
打破;
案例的视频:
这一点。data=https://www.yisu.com/zixun/{
类型:“视频”,
url: http://wxapp.cp31.ott.cibntv.net/6773887a7f94a71df718e212c/03002002005b836e73a0c5708529e09c1952a1 - 1 -对- 4289 - 875 - d - aee23d77530d.mp4& # 63; ccode=0517,时间=393,到期=18000,psid=bbd36054f9dd2b21efc4121e320f05a0& ups_client_netip=65600 b48& ups_ts=1549519607, ups_userid=21780671, utid=eWrCEmi2cFsCAWoLI41wnWhW& vid=XMzc5OTM0OTAyMA& vkey=A1b479ba34ca90bcc61e3d6c3b2da5a8e& 4=1, sp='
}
打破;
案例的文本:
这一点。data=https://www.yisu.com/zixun/{
类型:“文本”,
内容:“《流浪地球》中的科学:太阳何时吞并地球?科学家已经给出时间表”
}
打破;
默认值:
控制台。日志(“数据类型不合法:”+类型);
}
}
}，
创建:函数(){//默认为图片组件
this.change (img);
}
});
效果:
说说Vue.js中的功能函数化组件的使用
