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

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

＆＃13;

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

＆＃13;

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: {
  formType: {
     type: Boolean,
     default: false // or set true
  }
  message: {
     type: String,
     default: '' // whatever you want as default
  }
}

所以，你应该注意到我们正在初始化默认值。现在，您的错误应该消失并正常工作。

啊，是的，你还需要使用extend方法来工作：所以，替换这个：

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

有了这个：

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

请参阅问题here。

在Vue中传递全局组件中的道具

2 个答案: