Vue函数式组件的应用

1|0函数组件和普通组件区别

  1. 渲染快
  2. 没有实例,意味着没有(this)
  3. 没有生命周期(没有响应式数据)

2|0组件函数的使用


2|1以局部组件为例,将组件标记为 functional=ture;


因为函数式没有实例,因此组件需要的一切都是通过 context 参数传递,它是一个包括如下字段的对象:

  • props:提供所有 prop 的对象
  • children: VNode 子节点的数组
  • slots: 一个函数,返回了包含所有插槽的对象
  • scopedSlots: (2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。
  • data:传递给组件的整个数据对象,作为 createElement 的第二个参数传入组件
  • parent:对父组件的引用
  • listeners: (2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是 data.on 的一个别名。
  • injections: (2.3.0+) 如果使用了inject选项,则该对象包含了应当被注入的属性。

在添加 functional: true 之后,需要更新我们的锚点标题组件的渲染函数,为其增加 context参数,并将 this.$slots.default 更新为 context.children,然后将 this.level 更新为 context.props.level

因为函数式组件只是函数,所以渲染开销也低很多。

在作为包装组件时它们也同样非常有用。比如,当你需要做这些时:

    • 程序化地在多个组件中选择一个来代为渲染;
    • 在将 childrenpropsdata 传递给子组件之前操作它们。
      1     data() {
      2         return {
      3             changer:1
      4         }
      5     },
      1   components: {
       2         MyCmp:{
       3             functional:true,   //必要的设置
       4             render: function (createElement, context) {
       5                 function getcomp(cmp){
       6                     console.info(this); //输出为undefined,证明没有实例
       7                     if(cmp==1){
       8                         return comp1; 
       9                     }else{
      10                         return comp2
      11                     }
      12                 }
      13                 return createElement(getcomp(context.props.changer),
      14                 {
      15                     props:{
      16                         cmpData:context.props.data //为子组件传递数据
      17                     }
      18                 }
      19                 );
      20             },

      2|0定义要渲染的组件

      1 var comp1={
       2     props:['cmpData'],
       3     render:function(createElement,context){
       4         return createElement('el-input',{
       5             props:{
       6                 type:this.cmpData
       7             }
       8         });
       9     },
      10     mounted() {
      11         console.log(this)  //这个组件为正常组件
      12     },
      13 }
      14 var comp2={
      15     props:['cmpData'],
      16     render:function(createElement,context){
      17         return createElement('el-button',{
      18             props:{
      19                 type:this.cmpData
      20             }
      21         });
      22     },
      23     mounted() {
      24         console.log(this)  //正常组件
      25     },
      26 }

       


      3|0在父组件中使用

       

      1 9

你可能感兴趣的:(Vue函数式组件的应用)