Vue.js入门 0xD Render函数（3）函数化组件、JSX

最新推荐文章于 2023-10-18 16:46:46 发布

cellinlab

最新推荐文章于 2023-10-18 16:46:46 发布

阅读量654

点赞数

分类专栏： JavaScript 前端基础 Vue 文章标签： Vue.js JSX Vue函数化组件 Vue Render

本文链接：https://blog.csdn.net/funkstill/article/details/86755226

版权

前端基础同时被 3 个专栏收录

167 篇文章 0 订阅

订阅专栏

JavaScript

152 篇文章 2 订阅

订阅专栏

Vue

13 篇文章 0 订阅

订阅专栏

函数化组件

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 编译后才可以。

cellinlab

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js入门 0xD Render函数（3）函数化组件、JSX

函数化组件 Vue.js提供了一个functional的布尔值选项，设置为true可以使组件无状态和无实例，也就是没有data和this上下文。这样用render函数返回虚拟节点可以更容易渲染，因为函数化组件只是一个函数，渲染开销要小很多。&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta ...
复制链接

扫一扫