使用Vue自定义组件出现的错误

    技术2022-07-11  105

    前言

    ​ 在使用Vue的自定义组件的功能时,出现了一个错误

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

    ​ 代码如下

    html

    <body> <div id="div"> <student myname="不知火舞" age="24" sex=""></student> </div> </body>

    js

    //创建vue对象 new Vue({ //指定此vue对象解析的模板区域 el: "#div" }); //自定义student标签组件 Vue.component("student", { //定义组件的属性 props: ["myname", "age", "sex"], //定义组件的数据 data: function () { return { school: "清华中学" } }, //定义此组件的底层模板 template: ` <div> <div>{{myname}}</div> <div>{{age}}</div> <div>{{sex}}</div> </div> ` });

    js解释

    component( ):此方法是Vue用于自定义组件的方法。

    参数1:指定自定义组件的组件名。

    参数2:配置组件的参数属性。

    props:配置组件的属性,每个组件可以配置多个属性,多个属性使用数组包装。data:配置组件的数据,可以在组件模板中使用定义好的数据。template:配置此组件的底层模板,可以在此模板中使用插值表达式,引用前面配置的属性和数据。

    错误解决

    ​ 将创建Vue对象和自定义组件的代码交换以下即可,要先定义组件,再创建Vue对象。

    //自定义student标签组件 Vue.component("student", { //定义组件的属性 props: ["myname", "age", "sex"], //定义组件的数据 data: function () { return { school: "清华中学" } }, //定义此组件的底层模板 template: ` <div> <div>{{myname}}</div> <div>{{age}}</div> <div>{{sex}}</div> <div>{{school}}</div> </div> ` }); //创建vue对象 new Vue({ //指定此vue对象解析的模板区域 el: "#div" });
    Processed: 0.011, SQL: 9