Question

这是我样式化的组件文件，名为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警告]：未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

Answer 1

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

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

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

在单一文件组件方法中使用vue样式的组件

1 个答案: