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 <template> 2 <div> 3 <el-input v-model="changer" placeholder="子组件"></el-input> 4 5 6 <my-cmp :changer="changer"></my-cmp> 7 </div> 8 </template> 9 <script>

      4|0 理解渲染函数的参数

       

      接下来说一下createElement 接受的参数:

      第一个参数:可以是  {String | Object | Function}

      不管是那种类型,最终返回到都是需要渲染的普通DOM标签,

      第二个参数:是一个对象,这个参数是可选的,定义了需要渲染组件的参数,相对于普通HTML标签的属性是一样的。

      还可以自定义指令的,Vue特有的东西,只是抽象一些,没有直接用Vue.directive()用起来直观。

      第三个参数:子级虚拟节点,如果你这个节点只是单节点,没有嵌套节点,这个参数可以忽略。如果有的你就要使用一个数据数组的值位cerateElement()返回的虚拟节点。套路都是一样的。

       1 // @returns {VNode}
       2 createElement(
       3   // {String | Object | Function}
       4   // 一个 HTML 标签名、组件选项对象,或者
       5   // resolve 了上述任何一种的一个 async 函数。必填项。
       6   'div',
       7 
       8   // {Object}
       9   // 一个与模板中属性对应的数据对象。可选。
      10   {
      11     // 与 `v-bind:class` 的 API 相同,
      12     // 接受一个字符串、对象或字符串和对象组成的数组
      13     'class': {
      14         foo: true,
      15         bar: false
      16     },
      17     // 与 `v-bind:style` 的 API 相同,
      18     // 接受一个字符串、对象,或对象组成的数组
      19     style: {
      20         color: 'red',
      21         fontSize: '14px'
      22     },
      23     // 普通的 HTML 特性
      24     attrs: {
      25         id: 'foo'
      26     },
      27     // 组件 prop
      28     props: {
      29         myProp: 'bar'
      30     },
      31     // DOM 属性
      32     domProps: {
      33         innerHTML: 'baz'
      34     },
      35     // 事件监听器在 `on` 属性内,
      36     // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
      37     // 需要在处理函数中手动检查 keyCode。
      38     on: {
      39         click: this.clickHandler
      40     },
      41     // 仅用于组件,用于监听原生事件,而不是组件内部使用
      42     // `vm.$emit` 触发的事件。
      43     nativeOn: {
      44         click: this.nativeClickHandler
      45   },
      46   // 自定义指令。注意,你无法对 `binding` 中的 `oldValue`
      47   // 赋值,因为 Vue 已经自动为你进行了同步。
      48   directives: [
      49     {
      50       name: 'my-custom-directive',
      51       value: '2',
      52       expression: '1 + 1',
      53       arg: 'foo',
      54       modifiers: {
      55         bar: true
      56       }
      57     }
      58   ],
      59   // 作用域插槽的格式为
      60   // { name: props => VNode | Array<VNode> }
      61   scopedSlots: {
      62     default: props => createElement('span', props.text)
      63   },
      64   // 如果组件是其它组件的子组件,需为插槽指定名称
      65   slot: 'name-of-slot',
      66   // 其它特殊顶层属性
      67   key: 'myKey',
      68   ref: 'myRef',
      69   // 如果你在渲染函数中给多个元素都应用了相同的 ref 名,
      70   // 那么 `$refs.myRef` 会变成一个数组。
      71   refInFor: true    
      72   },
      73 
      74   // {String | Array}
      75   // 子级虚拟节点 (VNodes),由 `createElement()` 构建而成,
      76   // 也可以使用字符串来生成“文本虚拟节点”。可选。
      77   [
      78     '先写一些文字',
      79     createElement('h1', '一则头条'),
      80     createElement(MyComponent, {
      81       props: {
      82         someProp: 'foobar'
      83       }
      84     })
      85   ]
      86 )

       

本文来自博客园,作者:喆星高照,转载请注明原文链接:https://www.cnblogs.com/houxianzhou/p/15660267.html

posted @ 2021-12-08 10:33  喆星高照  阅读(238)  评论(0编辑  收藏  举报