vue模板套用问题

Question

被套用的模板

<template>
  <div id="goodsd-page">
    goodsd
  </div>
</template>
<script>
import sendRequest from '../js/req.js'
export default {
  name: 'goodsd',
  data() {
      return {
      }
  },
}
</script>

引用的模板

<template>
  <div id="app">
    <div class="top-nav">
      <router-link to="/" exact class="link-dafult"><span>首页</span></router-link>
      <router-link to="/news" class="link-dafult"><span>新闻动态</span></router-link>
      <router-link to="/goods" class="link-dafult"><span>产品展示</span></router-link>
      <router-link to="/about" class="link-dafult"><span>关于我们</span></router-link>
      <router-link to="/buy" class="link-dafult buy"><span>我要下单</span></router-link>
    </div>
    <router-view class="wrap"></router-view>
    <div class="bottom-wrap">
      <img src="http://of0zdndod.bkt.clouddn.com/static/img/bg.png" />
    </div>
    <goodsd></goodsd>
  </div>
</template>
<script>
import goodsd from '@/components/page/goodsdetail'
export default {
  name: 'app',
  data() {
      return {   
      }
  }
}
</script>

这样引用报错
vue.esm.js?d2fe:558 [Vue warn]: Unknown custom element: <goodsd> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <App> at F:testzygzzygwsrcApp.vue)
新手求解，谢谢！

Answer 1

引用了之后需要注册

components:{
   goodsd 
}

Answer 2

需要添加components属性：｛'goodsd':goodsd｝

Answer 3

import goodsd from '@/components/page/goodsdetail'
export default {
  name: 'app',
  components:{
   goodsd 
  },
  data() {
      return {   
      }
  }
}