解决:
Vue实例components配置项中 把组件命改为 短横线分割
下面是分析过程 以及vue官网中的提示
------------------------------------------------------分析过程------------------------------------------
1.控制台报错 :(您是否正确注册了组件?对于递归组件,请确保提供“name”选项。)
2. 分析代码
Vue.config.productionTip = false;
// 1.创建 2.注册 3.使用
// 创建school组件
const schoolPart = Vue.extend({
template: `
<div>
<p>名称: {{name}}</p>
<p>地址: {{adress}}</p>
</div>
`,
data() {
return {
name: '这是名字_组件1',
adress: '这是地址_组件1',
};
}
});
// 创建student组件
const studentPart = Vue.extend({
template: `
<div>
<p>年纪: {{age}}</p>
<p>大小: {{size}}</p>
</div>
`,
data() {
return {
age: '这是年纪_组件2',
size: '这是大小_组件2',
};
}
});
// 创建Vue实例
const vm = new Vue({
components: {
schoolPart,
studentPart
}
}).$mount('#root');
-
打开Vue官网
-
将Vue实例 components配置项中的组件改为 短横线分割命名
// 创建Vue实例
const vm = new Vue({
components: {
'school-part':schoolPart,
'student-part':studentPart
}
}).$mount('#root');
- 解决报错