在 Vue 中的全局组件中传递 Props

Question

我想在传递一些属性的同时全局注册一个组件，这样我就可以在页面中的任何位置调用它，但除非我使用内联模板，否则它似乎不起作用。

我不需要内联模板，我想将全局组件组织到单个目录中

import asidecomponent from '@/components/partial/reusable-components/aside-components'

    Vue.component('aside-component', asidecomponent, {
      props: {
        formType: Boolean,
        message: String
      }
    })


  <aside-component formType="true" message="Foo Bar"></aside-component>

但我无法让这件事发挥作用有什么想法吗？

Answer 1

我认为你的组件声明是错误的。要使用添加的 props 扩展组件定义，您可以使用该extends属性。

Vue.component('aside-component-with-props', {
  extends: asideComponent,
  props: {
    formType: Boolean,
    message: String
  }
});

Answer 2

您需要使用v-bind方法来对其值进行类型转换：

 <aside-component :formType="true" :message="'Foo Bar'"></aside-component>

哪里可以看到：

:formType="true" => passed as boolean
:message="'Foo Bar'" => passed as string (notice to the quote)

对于消息，您也可以像以前一样使用，因为它只是一个字符串。

从你提到的错误来看"Property or method "message" is not defined on the instance but referenced during render"，

我刚刚注意到你没有初始化该值。你应该像这样验证 props：

props: {
  formType: {
     type: Boolean,
     default: false // or set true
  }
  message: {
     type: String,
     default: '' // whatever you want as default
  }
}

因此，您应该注意到这里我们正在初始化默认值。现在，您的错误应该消失并且可以正常工作。

啊，是的，你还需要使用扩展方法来让 props 工作：所以，替换它：

Vue.component('aside-component', asidecomponent, {

有了这个：

Vue.component('aside-component', Vue.extend(asidecomponent), {

请参阅此处的问题。