投稿
问答

[Vue warn]: Unknown custom element

作者：admin 2021-04-30 我要评论

vue.esm.js?efeb:628 [Vue warn]: Unknown custom element: h - did you register the component correctly? For recursive components, make sure to provide t...

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)
vue.esm.js?efeb:628 [Vue warn]: Unknown custom element: <h> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <MainPage> at src/components/mainPage.vue
       <App> at src/App.vue
         <Root>
warn @ vue.esm.js?efeb:628

这个问题已经困扰很久了，小生愚钝一直不知道如何解决，望指点。不胜感激。

<template>
  <div id="mainPage" style="height:100%;width:100%">
    <a-layout id="components-layout-demo-top-side-2">
    <div id="header">
      <div class="logo">知&nbsp;否</div>

      <div id="title" @click="mainPage">
        <a-icon type="home" />&nbsp;首页
        <a-icon type="user" />&nbsp;个人中心
      </div>
        <input
            placeholder="input search text"
            size="large"
            @search="onSearch"
       >
        <button type="button" id="search" @click="onSearch" style="
    height: 15px;
    width: 80px;
    margin: 10px;
    padding: 18px;
    border-radius: 10px;
    line-height: 0px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 20px;
    color:white;
    position: absolute;
    background: deepskyblue;
    font-weight: bold;
    color: lightblue;



    transform: translateY(4px);
">提问</button>
      <div style="height:60px;weight:200px;float:right;padding: 0 20px;">
        <div id="right" style="padding: 20px 5px 10px 20px;">
        <a-icon type="bell"/>&nbsp;通知
        </div>
<!--        <div style="display: inline-block">
          ![](../assets/logo.png)
        </div>-->
        <template>
          <a-dropdown>
            <a style="color:white;font-size:15px" >
              {{ user_name }} <a-icon type="down" style="color:white;font-size:20px" />
            </a>
            <a-menu slot="overlay" @click="onClick">
              <a-menu-item key="1">
                <a-icon type="setting" />
                设置
              </a-menu-item>
              <a-menu-item key="2">
                <a-icon type="logout" />
                退出
              </a-menu-item>

            </a-menu>
          </a-dropdown>
        </template>

      </div>
    </div>

      <a-layout style="height:520px">

        <a-layout style="padding: 0 24px 24px">
          <a-breadcrumb style="margin: 16px 0">

          </a-breadcrumb>
          <a-layout-content
              :style="{ background: '#fff', padding: '14px', margin: 0, minHeight: '280px',width: '900px' }"
          >
            <div id="container_header">
              <a-menu mode="horizontal">
                <a-menu-item>推荐 </a-menu-item>
                <a-menu-item>关注</a-menu-item>
                <a-menu-item>热榜</a-menu-item>
              </a-menu>
            </div>
              <div id="question_block" v-for="item in questions">
                <h style="font-size: 15px" >{{item.user_name}}&nbsp;的提问期待你的解答</h><br/>
                <div style="float:right;background: red;font-size: 18px;padding:5px;color:white">未终结</div>
                <h id="question_title" style="font-size:20px;font-weight: bold">{{item.question_name}}</h><br/>
                <a @click="getAllAnswers">{{item.question_text}}&nbsp;&nbsp;查看全文&nbsp;<a-icon type="down" /></a><br/><br/>
                <a-button style="background: lightskyblue"><a-icon type="edit" />写回答</a-button>
                <div style="font-size: 14px;float:right;display:inline-block">{{item.question_date}}</div>
<!--                :{{item.question_shield_state}}:{{item.question_end_State}}:-->


              </div>

          </a-layout-content>
          <div id="side_card">
            <div
                style="height: 30px;
                      width: 100%;
                      text-align: center;
                      padding: 10px 0;
                      font-size: 20px;">
              创作中心
            </div>
            <a-divider style="margin:17px 0 13px 0;"/>

            <div style="height:80px;width:100%">
            <div style="height: 80px;width: 150px;padding: 0 0 0 20px;">
            <div style="height: 80px;
                  width: 100px;
                  text-align: center;
                  font-size: 20px;" @click="publishQuestions">
              <a-icon type="edit" style="fontSize:20px;padding: 0 0 10px 0"/><br/>
              发布问题
            </div>
            </div>

            <div style="position:absolute;
            display:inline-block;
            left: 150px;
            right: 0px;
            top: 60px;
            height: 80px;
            width: 10px;">
              <div style="height: 80px;
                  width: 100px;
                  text-align: center;
                  font-size: 20px;">
                <a-icon type="video-camera" style="fontSize:20px;padding: 0 0 10px 0"/><br/>
                发视频
              </div>
            </div>

            </div>
            <a-divider style="margin:17px 0 13px 0;"/>

            <a-row>
              <a-col :span="12" style="padding: 10px 0px;font-size: 20px;">
                稍后发
              </a-col>
              <a-divider type="vertical" style="height: 50px; position: absolute;right: 125px;"/>
              <a-col :span="12" style="padding: 10px 0px;font-size: 20px;">
                存草稿
              </a-col>
            </a-row>

          </div>
        </a-layout>

      </a-layout>
      </a-layout>

  </div>

</template>

<!--import { Divider } from 'antd';-->
<script>

export default {
  name: 'mainPage',
  data () {
    return {
      questions: {
          question_id:''
      },
      user_id:'',
      user_name:'',

    }
  },
  components:{

  },
  created:function() {
    console.log('created');
    this.getParameter();
    this.$nextTick(() => {
      // 在此处执行你要执行的函数
      this.getAllQuestions();

    })
  },
  methods: {
    getParameter(){
      // 将数据放在当前组件的数据内
      this.user_id = this.$route.params.user_id;
      this.user_name=this.$route.params.user_name;
    },

    onOpenChange (openKeys) {
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : []
      }
    },
    //分页获得所有的问题
    getAllQuestions () {
      var _this = this;
      _this.$axios.post('/api/question/getAllQuestions',
        _this.$qs.stringify({

        })
      ).then(function (response) {

        console.log("打印response.data：");
        console.log(response.data)
        console.log("打印list：");
        console.log(response.data.data)

        _this.questions = response.data.data;
        console.log("this.questions" + _this.questions)
      }).catch(function (error) {
        console.log(error);

      });
    },
    onClick ({ key }) {
      console.log(`Click on item ${key}`)
    },
    onSearch (value) {
      console.log(value)
    },
    mainPage(){
      this.$router.push({name:"mainPage"})
    },
    publishQuestions(){
      console.log(this.user_id,this.user_name);
      this.$router.push({name:"publishQuestions",params:{user_id:this.user_id,user_name:this.user_name}})
    },
    getAllAnswers() {
      var _this = this;
      _this.$axios.post('/api/answer/getAllAnswers',
        _this.$qs.stringify({
            question_id:_this.questions.question_id
        })
      ).then(function (response) {
        console.log('打印问题id:')
        console.log(_this.questions.question_id)

      }).catch(function (error) {
        console.log(error);

      });
    },


  },



}
</script>

<style scoped>
@import "../assets/index.css";
</style>
<template>
  <div id="mainPage" style="height:100%;width:100%">
    <a-layout id="components-layout-demo-top-side-2">
    <div id="header">
      <div class="logo">知&nbsp;否</div>
      <div id="title" @click="mainPage">
        <a-icon type="home" />&nbsp;首页
 <a-icon type="user" />&nbsp;个人中心
 </div>
        <input
 placeholder="input search text"
 size="large"
 @search="onSearch"
 >
        <button type="button" id="search" @click="onSearch" style="
 height: 15px;
    width: 80px;
    margin: 10px;
    padding: 18px;
    border-radius: 10px;
    line-height: 0px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 20px;
    color:white;
    position: absolute;
    background: deepskyblue;
    font-weight: bold;
    color: lightblue;
    transform: translateY(4px);
">提问</button>
      <div style="height:60px;weight:200px;float:right;padding: 0 20px;">
        <div id="right" style="padding: 20px 5px 10px 20px;">
        <a-icon type="bell"/>&nbsp;通知
 </div>
<!--        <div style="display: inline-block">
 <img alt="Vue logo" src="../assets/logo.png" style="width:50px;height:50px;padding: 0 0 10px 10px;"> </div>--> <template>
          <a-dropdown>
            <a style="color:white;font-size:15px" >
              {{ user_name }} <a-icon type="down" style="color:white;font-size:20px" />
            </a>
            <a-menu slot="overlay" @click="onClick">
              <a-menu-item key="1">
                <a-icon type="setting" />
                设置
 </a-menu-item>
              <a-menu-item key="2">
                <a-icon type="logout" />
                退出
 </a-menu-item>
            </a-menu>
          </a-dropdown>
        </template>
      </div>
    </div>
      <a-layout style="height:520px">
        <a-layout style="padding: 0 24px 24px">
          <a-breadcrumb style="margin: 16px 0">
          </a-breadcrumb>
          <a-layout-content
 :style="{ background: '#fff', padding: '14px', margin: 0, minHeight: '280px',width: '900px' }"
 >
            <div id="container_header">
              <a-menu mode="horizontal">
                <a-menu-item>推荐 </a-menu-item>
                <a-menu-item>关注</a-menu-item>
                <a-menu-item>热榜</a-menu-item>
              </a-menu>
            </div>
              <div id="question_block" v-for="item in questions">
                <h style="font-size: 15px" >{{item.user_name}}&nbsp;的提问期待你的解答</h><br/>
                <div style="float:right;background: red;font-size: 18px;padding:5px;color:white">未终结</div>
                <h id="question_title" style="font-size:20px;font-weight: bold">{{item.question_name}}</h><br/>
                <a @click="getAllAnswers">{{item.question_text}}&nbsp;&nbsp;查看全文&nbsp;<a-icon type="down" /></a><br/><br/>
                <a-button style="background: lightskyblue"><a-icon type="edit" />写回答</a-button>
                <div style="font-size: 14px;float:right;display:inline-block">{{item.question_date}}</div>
<!--                :{{item.question_shield_state}}:{{item.question_end_State}}:-->
 </div>
          </a-layout-content>
          <div id="side_card">
            <div
 style="height: 30px;
                      width: 100%;
                      text-align: center;
                      padding: 10px 0;
                      font-size: 20px;">
              创作中心
 </div>
            <a-divider style="margin:17px 0 13px 0;"/>
            <div style="height:80px;width:100%">
            <div style="height: 80px;width: 150px;padding: 0 0 0 20px;">
            <div style="height: 80px;
                  width: 100px;
                  text-align: center;
                  font-size: 20px;" @click="publishQuestions">
              <a-icon type="edit" style="fontSize:20px;padding: 0 0 10px 0"/><br/>
              发布问题
 </div>
            </div>
            <div style="position:absolute;
            display:inline-block;
            left: 150px;
            right: 0px;
            top: 60px;
            height: 80px;
            width: 10px;">
              <div style="height: 80px;
                  width: 100px;
                  text-align: center;
                  font-size: 20px;">
                <a-icon type="video-camera" style="fontSize:20px;padding: 0 0 10px 0"/><br/>
                发视频
 </div>
            </div>
            </div>
            <a-divider style="margin:17px 0 13px 0;"/>
            <a-row>
              <a-col :span="12" style="padding: 10px 0px;font-size: 20px;">
                稍后发
 </a-col>
              <a-divider type="vertical" style="height: 50px; position: absolute;right: 125px;"/>
              <a-col :span="12" style="padding: 10px 0px;font-size: 20px;">
                存草稿
 </a-col>
            </a-row>
          </div>
        </a-layout>
      </a-layout>
      </a-layout>
  </div>
</template>
<!--import { Divider } from 'antd';-->
<script>
export default {
  name: 'mainPage',
  data () {
    return {
      questions: {
          question_id:''
 },
      user_id:'',
      user_name:'',
    }
  },
  components:{
  },
  created:function() {
    console.log('created');
    this.getParameter();
    this.$nextTick(() => {
      // 在此处执行你要执行的函数
 this.getAllQuestions();
    })
  },
  methods: {
    getParameter(){
      // 将数据放在当前组件的数据内
 this.user_id = this.$route.params.user_id;
      this.user_name=this.$route.params.user_name;
    },
    onOpenChange (openKeys) {
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : []
      }
    },
    //分页获得所有的问题
 getAllQuestions () {
      var _this = this;
      _this.$axios.post('/api/question/getAllQuestions',
        _this.$qs.stringify({
        })
      ).then(function (response) {
        console.log("打印response.data：");
        console.log(response.data)
        console.log("打印list：");
        console.log(response.data.data)
        _this.questions = response.data.data;
        console.log("this.questions" + _this.questions)
      }).catch(function (error) {
        console.log(error);
      });
    },
    onClick ({ key }) {
      console.log(`Click on item ${key}`)
    },
    onSearch (value) {
      console.log(value)
    },
    mainPage(){
      this.$router.push({name:"mainPage"})
    },
    publishQuestions(){
      console.log(this.user_id,this.user_name);
      this.$router.push({name:"publishQuestions",params:{user_id:this.user_id,user_name:this.user_name}})
    },
    getAllAnswers() {
      var _this = this;
      _this.$axios.post('/api/answer/getAllAnswers',
        _this.$qs.stringify({
            question_id:_this.questions.question_id
 })
      ).then(function (response) {
        console.log('打印问题id:')
        console.log(_this.questions.question_id)
      }).catch(function (error) {
        console.log(error);
      });
    },
  },
}
</script>
<style scoped>
@import "../assets/index.css";
</style>

image.png
如需其他部分的代码，愿意及时奉上。

###

就是上边朋友说的……

 <h style="font-size: 15px" >{{item.user_name}}&nbsp;的提问期待你的解答</h><br/>
                <div style="float:right;background: red;font-size: 18px;padding:5px;color:white">未终结</div>
                <h id="question_title" style="font-size:20px;font-weight: bold">{{item.question_name}}</h><br/>
                <a @click="getAllAnswers">{{item.question_text}}&nbsp;&nbsp;查看全文&nbsp;<a-icon type="down" /></a><br/><br/>

这里面的<h>你没有注册。

export default {
  name: 'mainPage',
  data () {
    return {
      questions: {
          question_id:''
 },
      user_id:'',
      user_name:'',
    }
  },
  components:{
  },

components这里注册一下

###

报错信息不是说的听清楚的吗，有一个<h>的元素，但是并没有发现你有注册，也就是components里并没有注册该组件。你看看你template里的<h>标签，我想你应该是想要h1~6的原生标签吧，看不懂报错信息百度翻译下也行啊

版权声明：本文转载自网络，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的，如有侵权请联系QQ/微信：153890879删除

相关文章
  • [Vue warn]: Unknown custom element

    [Vue warn]: Unknown custom element

  • idea构建时乱码问题

    idea构建时乱码问题

  • CMDER 只能两个汉字为一个单位一起删改

    CMDER 只能两个汉字为一个单位一起删改

  • docker run -v 参数顺序确认？

    docker run -v 参数顺序确认？

腾讯云代理商
精彩导读
/uploads/allimg/210417/200921A60-0-lp.jpg

vue3watch监听props的数据发现oldProps

/images/defaultpic.gif

2021-02-18：给定一个字符串str，给定

/uploads/allimg/210419/0Z11V4G-0-lp.jpg

如何同域名下部署vue+ThinkPHP6？

/images/defaultpic.gif

我希望在 vue cli 中使用 posthtml pos

/uploads/allimg/210422/210212A12-0-lp.jpg

vue修改数据问题

/uploads/allimg/210420/15011620H-0-lp.jpg

VSCODE Python无法使用扩展模块

海外云服务器
热门资讯
备案：湘ICP备15009499号-1
网站简介 投稿须知 商务合作 版权申明 技术支持：TOP云