精华内容
下载资源
问答
  • functional为true,表示该组件为一个函数式组件 函数式组件:没有data状态,没有响应式数据,只会接受props属性,没有this,他就是一个函数

    functional为true,表示该组件为一个函数式组件
    函数式组件:没有data状态,没有响应式数据,只会接受props属性,没有this,他就是一个函数

    展开全文
  • vue的函数式组件functional

    千次阅读 2021-01-14 23:29:52
    vue的函数式组件functional主要有以下特点: 无状态(没有相应式数据) 无实例(没有this上下文,无法像传统组件一样通过this获取属性) 没有任何生命周期 轻量,渲染性能高,适合只依赖于外部数据传递而变化的组件...

    vue的函数式组件没怎么使用,所以可能不是很了解,所以,就花点时间大致了解下,算是对此有大概印象,其实它就是个函数而已,感觉与react的无状态组件有点像,特此做记录下。

    首先vue的函数式组件functional主要有以下特点:

    • 无状态(没有相应式数据)
    • 无实例(没有this上下文,无法像传统组件一样通过this获取属性)
    • 没有任何生命周期
    • 轻量,渲染性能高,渲染开销底,适合只依赖于外部数据传递而变化的组件(展示组件,无逻辑和状态修改)
    • 在template标签里标明functional
    • 只接受props值
    • 不需要script标签

    下面是关于此的简单demo,感觉动手操作下,会理解比较深。
    在这里插入图片描述
    Test.vue,

    <script>
    var vueCompt = {
      //传递home的data值到组件vueCompt内部
      props: ["data"],
      //渲染函数
      render: function (createElement) {
        return createElement("div", [
          createElement("div", "这个是vue图片"),
          createElement("img", {
            attrs: {
              src: this.data.url,
              height: 200,
              width: 200,
            },
          }),
        ]);
      },
    };
    
    var reactCompt = {
      props: ["data"],
      render: function (createElement) {
        return createElement("div", [
          createElement("div", "react用于构建用户界面的 JavaScript 库"),
          createElement("img", {
            attrs: {
              src: this.data.url,
              height: 200,
              width: 200,
            },
          }),
          createElement("div", this.data.text),
        ]);
      },
    };
    
    export default {
      /*
      添加 functional: true 之后就是函数式组件functional
      */
      functional: true,
      props: {
        data: {
          type: Object,
          required: true,
        },
      },
      /**
       * 函数式组件没有创建组件实例,所有传统的通过this来调用的属性,在这里都需要通过context来调用
       */
      render: function (createElement, context) {
        function getComponent() {
          var data = context.props.data;
          //判断是哪一种类型的组件
          switch (data.type) {
            case "vue":
              return vueCompt;
            case "react":
              return reactCompt;
            default:
              console.log("data 类型不合法:" + data.type);
          }
        }
        return createElement(
          getComponent(),
          {
            props: {
              data: context.props.data,
            },
          },
          context.children
        );
      },
    };
    </script>
    
    

    Home.vue

    <template>
      <div class="home">
        <h2>vue的functional小栗子</h2>
        <test :data="data"></test>
        <button @click="change('react')">react文字</button>
        <button @click="change('vue')">vue图</button>
      </div>
    </template>
    
    <script>
    import Test from "@/views/Test.vue";
    export default {
      name: "Home",
      data() {
        return {
          data: {},
        };
      },
      components: {
        Test,
      },
      methods: {
        change: function (type) {
          switch (type) {
            case "vue":
              this.data = {
                type: "vue",
                url: "https://cn.vuejs.org/images/logo.png",
                list: [],
              };
              break;
            case "react":
              this.data = {
                type: "react",
                url:
                  "https://cdn.jsdelivr.net/gh/reactnativecn/react-native-website@gh-pages/img/header_logo.svg",
                text:
                  "React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图,当数据改变时 React 能有效地更新并正确地渲染组件",
              };
              break;
          }
        },
      },
      created: function () {
        this.change("react");
      },
    };
    </script>
    
    

    vue的函数式组件functional参考:

    官方functional参考

    Vue 函数式组件原理和使用详解

    Vue 函数式组件 functional

    说说 Vue.js 中的 functional 函数化组件

    推荐在线MP4转gif工具

    展开全文
  • 用法:npm我将babel-plugin-jsx-vue-functional -D或yarn添加到babel-plugin-jsx-vue-functional -D,然后在插件示例.babelrc下将jsx-vue-functional添加到您的.babelrc文件:{“ presets “:[” es2015“],”插件...
  • Vue功能日历 适用于Vue.js的现代日历和日期选择器模块 ...import FunctionalCalendar from 'vue-functional-calendar' ; Vue . use ( FunctionalCalendar , { dayNames : [ 'Mo' , 'Tu' , 'We' , 'Th' ,
  • 说说 Vue.js 中的 functional 函数化组件

    千次阅读 2019-02-07 14:32:34
    Vue.js 组件提供了一个 functional 开关,设置为 true 后,就可以让组件变为无状态、无实例的函数化组件。因为只是函数,所以渲染的开销相对来说,较小。 函数化的组件中的 Render 函数,提供了第二个参数 context ...

    Vue.js 组件提供了一个 functional 开关,设置为 true 后,就可以让组件变为无状态、无实例的函数化组件。因为只是函数,所以渲染的开销相对来说,较小。

    函数化的组件中的 Render 函数,提供了第二个参数 context 作为上下文,data、props、slots、children 以及 parent 都可以通过 context 来访问。

    1 示例

    这里,我们用 functional 函数化组件来实现一个智能组件。

    html:

    <div id="app">
        <smart-component :data="data"></smart-component>
        <button @click="change('img')">图片组件</button>
        <button @click="change('video')">视频组件</button>
        <button @click="change('text')">文本组件</button>
    </div>
    

    js:

    //图片组件设置
    var imgOptions = {
    	props: ['data'],
    	render: function (createElement) {
    		return createElement('div', [
    			createElement('p', '图片组件'),
    			createElement('img', {
    				attrs: {
    					src: this.data.url,
    					height: 300,
    					weight: 400
    
    				}
    			})
    		]);
    	}
    };
    
    //视频组件设置
    var videoOptions = {
    	props: ['data'],
    	render: function (createElement) {
    		return createElement('div', [
    			createElement('p', '视频组件'),
    			createElement('video', {
    				attrs: {
    					src: this.data.url,
    					controls: 'controls',
    					autoplay: 'autoplay'
    				}
    			})
    		]);
    	}
    };
    
    //文本组件设置
    var textOptions = {
    	props: ['data'],
    	render: function (createElement) {
    		return createElement('div', [
    			createElement('p', '文本组件'),
    			createElement('p', this.data.content)
    		]);
    	}
    };
    
    Vue.component('smart-component', {
    	//设置为函数化组件
    	functional: true,
    	render: function (createElement, context) {
    		function get() {
    			var data = context.props.data;
    
    			console.log("smart-component/type:" + data.type);
    			//判断是哪一种类型的组件
    			switch (data.type) {
    				case 'img':
    					return imgOptions;
    				case 'video':
    					return videoOptions;
    				case 'text':
    					return textOptions;
    				default:
    					console.log("data 类型不合法:" + data.type);
    			}
    		}
    
    		return createElement(
    			get(),
    			{
    				props: {
    					data: context.props.data
    				}
    			},
    			context.children
    		)
    	},
    	props: {
    		data: {
    			type: Object,
    			required: true
    		}
    	}
    })
    
    var app = new Vue({
    	el: '#app',
    	data: {
    		data: {}
    	},
    	methods: {
    		change: function (type) {
    			console.log("输入类型:" + type);
    			switch (type) {
    				case 'img':
    					this.data = {
    						type: 'img',
    						url: 'http://pic-bucket.ws.126.net/photo/0001/2019-02-07/E7D8PON900AO0001NOS.jpg'
    					}
    					break;
    				case 'video':
    					this.data = {
    						type: 'video',
    						url: 'http://wxapp.cp31.ott.cibntv.net/6773887A7F94A71DF718E212C/03002002005B836E73A0C5708529E09C1952A1-1FCF-4289-875D-AEE23D77530D.mp4?ccode=0517&duration=393&expire=18000&psid=bbd36054f9dd2b21efc4121e320f05a0&ups_client_netip=65600b48&ups_ts=1549519607&ups_userid=21780671&utid=eWrCEmi2cFsCAWoLI41wnWhW&vid=XMzc5OTM0OTAyMA&vkey=A1b479ba34ca90bcc61e3d6c3b2da5a8e&iv=1&sp='
    					}
    					break;
    				case 'text':
    					this.data = {
    						type: 'text',
    						content: '《流浪地球》中的科学:太阳何时吞并地球?科学家已经给出时间表'
    					}
    					break;
    				default:
    					console.log("data 类型不合法:" + type);
    			}
    
    		}
    	},
    	created: function () {
    		//默认为图片组件
    		this.change('img');
    	}
    
    });
    

    效果:

    • 首先定义了图片组件设置对象、视频组件设置对象以及文本组件设置对象,它们都以 data 作为入参。
    • 函数化组件 smart-component,也以 data 作为入参。内部根据 get() 函数来判断需要渲染的组件类型。
    • 函数化组件 smart-component 的 render 函数,以 get() 作为第一个参数;以 smart-component 所传入的 data,作为第二个参数:
    return createElement(
    	get(),
    	{
    		props: {
    			data: context.props.data
    		}
    	},
    	context.children
    )
    
    • 根实例 app 的 change 方法,根据输入的类型,来切换不同的组件所需要的数据。

    2 应用场景

    函数化组件不常用,它应该应用于以下场景:

    • 需要通过编程实现在多种组件中选择一种。
    • children、props 或者 data 在传递给子组件之前,处理它们。

    本文示例代码

    展开全文
  • vue中的functional函数式组件

    千次阅读 2019-12-25 22:48:06
    vue中的函数式组件也称为无状态组件,与Flutter中的无状态组件类似,其内部没有任何状态。函数式组件中只接受一个props参数,没有其他参数。 <!-- 声明为一个函数式组件 --> <template functional> {{...

    vue中的函数式组件也称为无状态组件,与Flutter中的无状态组件类似,其内部没有任何状态。函数式组件中只接受一个props参数,没有其他参数。

    <!-- 声明为一个函数式组件 -->
    <template functional>
    	{{data}}
    <template>
    <script>
    export default {
    	props: {
    		data: ''
    	}
    }
    </script>
    
    Vue.component('my-component', {
      // 声明为函数式组件
      functional: true, 
      // Props 是可选的
      props: {
        // ...
      }, render: function (createElement, context) {
        // ...
      }
    })
    
    展开全文
  • 主要介绍了说说Vue.js中的functional函数化组件的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • npm i vue-functional-data-merge # Yarn: yarn add vue-functional-data-merge 现在,将其导入并在您的功能组件声明中使用: // MyFunctionalComponent.js // ESM import { mergeData } from "vue-functional-...
  • template functional

    千次阅读 2019-10-09 10:57:22
    functional 是什么? 它是函数式组件的一个标记,如果一个组件没有管理任何状态,也没有监听任何传递给它的状态,没有声明周期方法。实际上,它只是接收一些props的函数,在这种场景下,我们可以将组建... Vue.js...
  • 在 2.5.0 及以上版本中,如果你使用了单文件组件(就是普通的.vue 文件),可以直接在 template 上声明functional 3.组件需要的一切都是通过 context 参数传递 context 属性有: 1.props:提供所有 prop 的对象 2....
  • 若一个组件只用于展示数据,所有动态数据都从父组件传递进来(只有props),内部没有逻辑交互(无methods方法、也没有mounted等任何生命周期处理函数),没有状态修改(无data),则推荐使用函数式组件来提升vue的性能...
  • 功能性 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint
  • 组件写的多了,可以把通用的组件单独抽离成一个组件库,供别的项目或者其他人使用。 文章链接:...一个比较实用的功能按钮库:https://github.com/justforuse/functional-button 演示...
  • 主要介绍了Vue组件之作用域插槽,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • <script src="https://cdn.staticfile.org/vue/2.3.2/vue.js"> Vue.component('aaa', { functional: true, render: function (h, ctx) { return h('div',['aaa']) }, }) Vue.component('bbb', { functional: ...
  • import { useRouter } from 'vue-router' const buttonGoHome = () => useRouter().push({ name: 'Home' }) </script> 控制台直接报错 警告我们说inject() can only be used inside setup() or ...
  • 如果使用render函数来写比较复杂的vue组件,对于可读性和可维护性都很不友好,而使用jsx就会让我们回到更接近于模板的语法。babel转译器会将jsx转译为render函数渲染。 配置 需要用到babel插件 安装 npm install\ ...
  • 需要在组件中把functional...Vue.component('testcomponent', { functional: true, // 为了弥补缺少的实例 // 提供第二个参数作为上下文 render: function (createElement, context) { // ... }, // P...
  • Vue's functional components are small and flexible enough to be declared inside of .vue file next to the main component. This allows you to mix jsx and Vue's templates so you have complete control ove...
  • vue组件递归使用

    2019-05-18 09:44:18
    vue组件递归使用,废话少说直接看实列 1、效果 2、代码 2.1、父组件 <template> <div> <list-table @editFunction="editFunction" @addSubFunction="addSubFunction" ...
  • 以局部组件为例,将组件标记为functional=ture; 因为函数式没有实例,因此组件需要的一切都是通过context参数传递,它是一个包括如下字段的对象: props:提供所有 prop 的对象children: VNode 子节点的数组slots: ...
  • Functional templates allow you to create components consisting of only thetemplatetag and exposing thepropspassed into the template with thepropsobject off of the template context. This approach...
  • VUE3 中使用 VUEX,报错【[Vue warn]: inject() can only be used inside setup() or functional components.】 参考链接1:参考链接 vuex 报错 injuce() 参考链接2:vuex 报错 无法在methods中使用store的引入 ...
  • Vue.js 组件精讲

    2020-02-19 16:00:09
    5. 表格组件 Table,典型的数据驱动型组件,使用了函数式组件(Functional Render)来自定义列模板; 6. 表格组件 Table,与上例不同的是,它的自定义列模板使用了 `slot-scope`; 7. 树形控件 Tree,典型的数据...
  • Vue2.x与@vue/compositio-api上手指南

    千次阅读 2020-07-10 21:41:10
    @vue/composition-api分享 该API现已稳定! ???? 当迁移到 Vue 3 时,只需简单的将 @vue/composition-api 替换成 vue 即可。你现有的代码几乎无需进行额外的改动。 动机与目的 更好的逻辑复用与代码组织 随着功能...
  • 本文是 Vue 3.0 进阶系列 的第五篇文章,在这篇文章中,阿宝哥将介绍 Vue 3 中的核心对象 —— VNode,该对象用于描述节点的信息,它的全称是虚拟节点(virtual nod...
  • vue怎么给template传值?

    2021-02-08 22:17:38
    萌新刚接触vue,百度搜索了很多给template传值的方式,自己尝试了都没有效果。 下面是代码: <p><img alt="" height="333" src=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,340
精华内容 1,336
关键字:

functionalvue

vue 订阅
友情链接: htm2txt.rar