在单文件组件方法中使用 vue-styled-components答案

【问题标题】：Using vue-styled-components in Single file component approach在单文件组件方法中使用 vue-styled-components
【发布时间】：2019-02-23 07:57:06
【问题描述】：

这是我的样式化组件文件，名为 styles.js

import styled from 'vue-styled-components';

export const StyledTitle = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
`;

export const Wrapper = styled.section`
    padding: 4em;
    background: papayawhip;
`;

然后在我的 .vue 单文件组件中

<template>
  <div class="m-15">
    <StyledTitle>SUBMIT YOUR DETAILS</StyledTitle>
  </div>
</template>

<script>

import { StyledTitle, Wrapper } from "./styles.js";

export default {
  name: "BuyNowCustomerDetails",
  props: {
    msg: String
  }
};
</script>

不工作！

错误

[Vue 警告]：未知的自定义元素：- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

【问题讨论】：

标签： javascript vue.js styled-components

【解决方案1】：

您必须在您的导出语句中注册外部组件：

import { StyledTitle, Wrapper } from "./styles.js";

export default {
  name: "BuyNowCustomerDetails",
  props: {
    msg: String
  },
  //register components
  components: {
     StyledTitle
  }
};

【讨论】：