原因一:引入组件时多加了大括号
import Addition from './components/Addition' // 引入组件不需要加{}
import { deviceDetail, queryHttpLogs } from '@/api/device' // 引入接口时才加{}
引入组件千万不要加大括号!!
import时加了{}
代表引入的是书写路径内的子组件,而非路径文件。比如下面引入接口时,一个文件会export 多个子项,所以当我们引入接口时会加{}
。
import { axios } from '@/utils/request'
export function queryHttpLogs (data) {
return axios({
url: '/queryLogs/http',
method: 'POST',
data
})
}
export function queryMttpLogs (data) {
return axios({
url: '/queryLogs/mqtt',
method: 'POST',
data
})
}
原因二:注册组件时components
误写为component
export default {
data () {
return {}
},
// 答应我不要忘记加s好吗!!
components: {
'my-addition': Addition,
'my-subtraction': Subtraction
}
}
原因三:应用组件时没有将"驼峰"转换成"短横线加小写" 【单页面vue】
// 此组件名称为doExample
Vue.component("doExample",{
data:function(){
return{
multiplierA: 0,
multiplierB: 0,
result: 0,
}
}
template: "#example" // 挂载的template是在body定义好-的,id=example
})
上面组件应用时应该将大写转为短横线加小写:
<do-example></do-example>
多页面(components声明)不需要遵循上面规定