vue中给render函数子组件设置ref

最新推荐文章于 2024-07-03 18:03:22 发布

Э时间行者于我

最新推荐文章于 2024-07-03 18:03:22 发布

阅读量1.6k

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_45094682/article/details/127421965

版权

Vue 专栏收录该内容

47 篇文章 3 订阅

订阅专栏

这个问题是我用iview ui 中table嵌套表格出现的，想设置ref调用组件中的方法

table

我们按照平时的写法，ref是不会生效的，因为render函数是根据传入的标签渲染的，而ref是渲染之后才创建的，所以正常写`h`render函数中使用ref是无效的

下面这样写是无效的，是我刚开始的写法，有效的方法继续往下看

{
          type: 'expand',
          width: 60,
          align: 'center',
          render: (h, params) => {
            return h(expandRow, { // 这样写拿不到ref
              ref: 'child1',
              props: {
                code: params.row,
                getshippingmethodsId: this.getshippingmethodsId,
                isValue: 'open',
                dadArgs: this.sonDadArgs
              },
              style: { marginLeft: '46px' },
              on: {
                refresh: this.refresh,
                fatherAdd1: this.fatherAdd
              }
            })
          }
        },

下面这样写才是有效的

render

解决办法

把h改为 this.$createElement

  {
    type: 'expand',
    width: 60,
    align: 'center',
    render: (h, params) => {
      return this.$createElement(expandRow, { // 把h换成this.$createElement
        ref: 'child1',
        props: {
          code: params.row,
          getshippingmethodsId: this.getshippingmethodsId,
          isValue: 'open',
          dadArgs: this.sonDadArgs
        },
        style: { marginLeft: '46px' },
        on: {
          refresh: this.refresh,
          fatherAdd1: this.fatherAdd
        }
      })
    }
  },

Vue在创建Vue实例时，通过render作为函数来渲染Dom树，而在render方法中，又调用createElement函数来渲染子组件或元素。因此此时元素或子组件处于渲染过程。ref是用来给元素或子组件注册引用信息的，引用信息将会注册在父组件的$refs对象上。因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们，因为那时候还不存在。