在使用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" });