component是注册全局组件，在实例化VUE前调用，注册后可以全局使用
Vue.component('todo-item',{
props:['grocery'],
template:'<li>{{grocery.text}}</li>'
})
var app7 = new Vue({
el:"#app7",
data:{
groceryList:[
{"id":0,"text":"蔬菜"},
{"id":1,"text":"奶酪"},
{"id":2,"text":"其他"}
]
}
})
components是局部注册组件，注册后只能在当页调用。
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
// ...
components: {
// <my-component> 将只在父模板可用
'my-component': Child
}
})
还有一种使用VUE.use()注册的方法。
如/components/loading/文件夹下有多个文件 index.js 和loading.vue文件，其中loading.vue普通组件文件，index.js文件如下
import MyLoading from './Loading.vue'
// 这里是重点
const Loading = {
install: function(Vue){
Vue.component('my-load',MyLoading );
}
}
//导出组件
export default Loading
或是直接输出
import MyLoading from './Loading.vue'
// 这里是重点
export default {
install:function(Vue){
Vue.component('my-load',MyLoading );
}
}
在main.js 里面只要在new Vue前 加上
import Loading from './components/loading'
Vue.use(Loading);
