天天看點

Unknown custom element: <my-cpnc> - did you register the component correctly? For recursive componen報錯資訊錯誤代碼錯誤原因修改後代碼

報錯資訊

[Vue warn]: Unknown custom element: <my-cpnc> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)
           

錯誤代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>元件入門</title>
</head>
<body>

<div id="app">
  <my-cpnC></my-cpnC>
</div>

<script src="../js/vue.js"></script>



<script>

  const cpnC = Vue.extend({
    template: `
      <div>
        <h2>我是标題</h2>
        <p>111哈哈哈</p>
        <p>222呵呵呵</p>
      </div>`
  });

  Vue.component("my-cpnC",cpnC);

  let vm = new Vue({
    el: "#app",
    data: {
      message: "你好",
    },
    methods: {

    },
    computed: {

    },
    filters: {

    }
  })
</script>

</body>
</html>
           

錯誤原因

梅開二度,Vue元件名稱不區分大小寫,不要出現大寫字母,注意注意!!!

修改後代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>元件入門</title>
</head>
<body>

<div id="app">
  <my-cpn></my-cpn>
</div>

<script src="../js/vue.js"></script>



<script>

  const cpnC = Vue.extend({
    template: `
      <div>
        <h2>我是标題</h2>
        <p>111哈哈哈</p>
        <p>222呵呵呵</p>
      </div>`
  });

  Vue.component("my-cpn",cpnC);

  let vm = new Vue({
    el: "#app",
    data: {
      message: "你好",
    },
    methods: {

    },
    computed: {

    },
    filters: {

    }
  })
</script>

</body>
</html>
           

繼續閱讀