Vue3 如何将道具发送到创建的子组件

Question

道具被初始化，但在.mount之后它们消失了。 我应该如何使用动态加载的组件正确设置props ？

import {createApp} from 'vue'

blockView = createApp(Block);
blockView.props = {
    type: json['type'],
    title: json['title'],
    subtitle: json['subtitle']
}
blockView.mount(this.$refs.container)

Answer 1

道具不可用于应用程序，只能用于组件，但是我发现这些可用于将值传递给应用程序。

1.使用注入/提供

const app = Vue.createApp({
    inject: ['name'],
    // ...etc
})
app.provide("name", "Ludwig")
app.mount('#app2')

这不完全是一个道具（并且需要在挂载之前传递），但可以为您工作。

更多信息： https : //v3.vuejs.org/api/application-api.html#provide

2. 嵌套为渲染函数并包装

通过包装在渲染函数中，您可以传递道具。 如果您再次将其包装在您的自定义挂载函数中，您可以自定义以允许传递道具。

// the app as a component
const appComponent = Vue.defineComponent({
  name: "appComponent",
  props: {
    name: {}
  },
  // ...etc
})

// wrap mount function
const mountApp = (selector, props) => {
  // the actual app is just a simple render function
  const app = Vue.createApp({
    components: { appComponent },
    render() {
      return Vue.h(appComponent, props)
    }
  })
  // mount to the passed selector
  app.mount(selector);
}

// call function with props
mountApp('#app1', {
  name: "Darla"
});

示例小提琴