在 php laravel-mix 上使用 h() 和子级渲染时传递 props

Question

我有一个 vuejs 组件的案例，需要使用

php

和

laravel-mix

进行渲染。它接受

role

道具

export default {
  name: 'ComponentOne',
  props: {
    role: [Number],
  },
  methods: {
    render(h) {
      return h(
        'div',
        {
          attrs: {
            id: 'component-one',
          }
        },
         this.$slots.default
      )
    },
  },
};

<?php
  $role = 1;
?>

<div id="app">
  <component-one :role="<?php echo $role ?>" />
</div>

由于某些包的使用，组件渲染需要定义如下：

import Vue from 'vue'
import ComponentOne from './ComponentOne.vue'
import SomePackage, { Wrapper, Reset } from '@somepackages'

Vue.use(SomePackage)

new Vue({
  render: (h) => h(Wrapper, [h(Reset), h(ComponentOne)]),
}).$mount('#app')

因此

role

道具会传递给

Wrapper

，而

ComponentOne

上的道具是

undefined

。

有没有办法将 props 从

Wrapper

传递到

ComponentOne

而无需在

Wrapper

上逐字声明？

我一直在尝试使用

provide

和

inject

，并且有点效果。但我想知道是否还有其他我不知道的方法。

export default {
  name: 'ComponentOne',
  provide() {
    return { role: this.role };
  },
  inject: ['role'],
  props: {
    role: [Number],
  },
  methods: {
    render(h) {
      return h(
        'div',
        {
          attrs: {
            id: 'component-one',
          }
        },
         this.$slots.default
      )
    },
  },
};

Answer 1

我能够找到一种从模板中获取道具值的方法。

import Vue from 'vue'
import ComponentOne from './ComponentOne.vue'
import SomePackage, { Wrapper, Reset } from '@somepackages'

Vue.use(SomePackage)

new Vue({
  render: function (h) {
    const allProps = Object.keys(ComponentOne.props).reduce((carry, key) => {
      carry[key] = this.$vnode?.componentOptions?.propsData?.[key]
      return carry;
    }, {});
    return h(Wrapper, [h(reset), h(ComponentOne, { props: { ...allProps } })]
  },
}).$mount('#app')

this.$vnode

是来自虚拟节点的对象，其中已经在 php 上渲染。这样我就可以获取元素上启动的 props 值。