关于ant-design-vue的问题 发现布局内部属性不生效

Matoi
  • 25

今天刚使用antd 遇到一些问题 本人新手这个问题想了好久没解决,是需要引入一些其他东西吗
import { Button,Layout} from 'ant-design-vue';
Vue.component(Button.name, Button)
Vue.component(Layout.name, Layout)
这一段代码不生效 搬官网的

<a-layout>
  <a-layout-sider>Sider</a-layout-sider>
  <a-layout>
    <a-layout-header>Header</a-layout-header>
    <a-layout-content>Content</a-layout-content>
    <a-layout-footer>Footer</a-layout-footer>
  </a-layout>
</a-layout>
报错提示是:Unknown custom element: <a-layout-content> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

这个是我的页面(代码是直接copy官网的)
clipboard.png
这是官网页面
clipboard.png

回复
阅读 9.6k
3 个回答

还需要在main.js中注册内部属性

Vue.component(Layout.Header.name, Layout.Header);
Vue.component(Layout.Content.name, Layout.Content);
Vue.component(Layout.Footer.name, Layout.Footer);
Vue.component(Layout.Sider.name, Layout.Sider);
洛冰河
  • 2
新手上路,请多包涵

在按需引入中,写法如下:

import { Layout } from 'ant-design-vue'

const { Header, Content, Footer } = Layout
export default {
  name: 'Index',
  components: {
    Layout,
    Header,
    Content,
    Footer
  }
}

Password等标签也如上从Input中提取出来使用,实话讲我也没在文档中找到说明使用它们的方法,antd-design-vue用起来有点点难受。

你知道吗?

宣传栏