Vue3中如何从main.ts向根组件App.vue传递属性并生效？

你尝试从main.ts向App.vue传递布尔属性freshchatActive，但控制台始终打印默认值false，当前代码如下：

main.ts:

const freshchatActive = false;

new Vue({
  router,
  store,
  i18n,
  vuetify,
  props: { freshchatActive: Boolean },
  render: h => h(App),
}).$mount("#app");

App.vue:

export default class App extends Vue {
  @Prop({ default: () => false }) freshchatActive!: boolean;

  created() {
    console.log("created #freshchatActive", this.freshchatActive);
  }
}

问题原因 #

你给Vue实例本身声明了props，但这不会自动将属性传递给render函数中渲染的App组件。要给根组件传递props，需要在h（createElement）函数的第二个参数中指定props选项。

正确写法 #

修改main.ts的代码，在渲染App组件时传入props：

const freshchatActive = false;

new Vue({
  router,
  store,
  i18n,
  vuetify,
  render: h => h(App, {
    props: {
      freshchatActive
    }
  }),
}).$mount("#app");

另外，App.vue中的@Prop可以简化，布尔类型的默认值无需使用箭头函数：

export default class App extends Vue {
  @Prop({ default: false }) freshchatActive!: boolean;

  created() {
    console.log("created #freshchatActive", this.freshchatActive);
  }
}

这样修改后，freshchatActive的值就能正确传递到App.vue中，控制台会打印你传入的对应值。

内容的提问来源于stack exchange，提问作者Stephan Kühn