介绍
在某个 Vue实例中，定义局部组件，只能在 该 Vue实例 中使用
注意：在其他 Vue实例 中使用局部组件，会报错
优点
全局组件 与 局部组件的优缺点，类似 全局变量 与 局部变量 的优缺点
全局组件过多时，会名字冲突
有时只能当前 Vue实例中 才会使用该局部组件
简单例子
在 Vue 的参数 components 中注册
定义组件、使用组件 与 全局组件相同，没有变化
<div id="app" >
<hello></hello>
<my-button></my-button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
var hello={
template:"<div>hello world！</div>"
}
var myButton={
template:"<input type='button' value='按钮'>"
}
var vm=new Vue({
el: '#app',
components: { //在该Vue实例中注册组件，这些组件就是局部组件
'hello':hello,
'my-button':myButton
}
})
</script>
例子：只在该vue实例中使用
<div id="app" >
<my-input></my-input>使用 my-input 局部组件<br/>
<my-button></my-button>由于 my-button 组件 注册成app2的局部组件，所以在app中不显示<br/>
</div>
<br>-----分割线-----------------------<br><br>
<div id="app2" >
<my-input></my-input>由于 my-input 组件 注册成app的局部组件，所以在app2中不显示<br/>
<my-button></my-button>使用 my-button 局部组件<br/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
var myInput={
template:"<input type='text' v-model='name'>" ,
data:function(){
return {
name:'李雷！'
}
}
}
var myButton={
template:"<input type='button' value='按钮'>"
}
var vm=new Vue({
el: '#app',
components: {
'my-input':myInput//将my-input注册为vm实例的局部组件
}
})
var vm2=new Vue({
el: '#app2',
components: {
'my-button':myButton//将my-button注册为vm2实例的局部组件
}
})
</script>
局部组件嵌套
<div id="app" >
<hello></hello>
</div>
<div id="app2" >
<hello></hello>
<my-button></my-button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
var myInput={
template:"姓名：<input type='text' value=''>"
}
var hello={
components: {//先注册该局部组件，然后下面才能使用。与全局组件不同
'my-input':myInput
},
template:"<div>hello world！<my-input/></div>"
}
new Vue({
el: '#app',
components: {
'hello':hello
}
})
</script>