全局组件与局部组件,父组件与子组件
全局组件和局部组件
组件的注册方式有两种,一种是全局组件一种是局部组件。
```html
<div id="app">
<h2>全局组件</h2>
<my-cpn></my-cpn>
<h2>局部组件</h2>
<cpnc></cpnc>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
// 1.创建组件构造器对象
const cpnc = Vue.extend({
template:`
<div>
<h2>标题</h2>
<p>内容1</p>
<p>内容2</p>
</div>`
})
注册组件(全局组件,可以在多个vue实例中使用)
Vue.component('my-cpn', cpnc)
const app = new Vue({
el:"#app",
components:{//局部组件创建
cpnc:cpnc
}
})
</script>
```
全局组件
全局组件,可以在多个vue实例中使用,类似于全局变量。
使用`Vue.component('my-cpn', cpnc)`方式注册,直接使用`<my-cpn></my-cpn>`调用。`my-cpn`是全局组件的名字,`cpnc`是定义的组件对象。
局部组件
局部组件,只能在当前vue实例挂载的对象中使用,类似于局部变量,有块级作用域。
> 注册方式
```javascript
const app = new Vue({
el:"#app",
components:{//局部组件创建
cpnc:cpnc
}
})
```
使用方式与全局变量一样,直接使用`<cpnc></cpnc>`调用。`cpnc:cpnc`第一个cpnc是给组件命名的名字,第二个是定义的组件对象。如果俩个同名也可以直接使用es6语法:
```javascript
components:{//局部组件创建
cpnc
}
```
父组件与子组件的区别
```html
<div id="app">
<cpn2></cpn2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
// 1.创建组件构造器对象
const cpn1 = Vue.extend({
template:`
<div>
<h2>标题1</h2>
<p>组件1</p>
</div>`
})
// 组件2中使用组件1
const cpn2 = Vue.extend({
template:`
<div>
<h2>标题2</h2>
<p>组件2</p>
<cpn1></cpn1>
</div>`,
components:{
cpn1:cpn1
}
})
const app = new Vue({
el:"#app",
components:{//局部组件创建
cpn2:cpn2
}
})
</script>
```
上述代码中定义了两个组件对象`cpn1`和`cpn2`,在组件`cpn2`中使用局部组件注册了`cpn1`,并在`template`中使用了注册的`cpn1`,然后在vue实例中使用注册了局部组件`cpn2`,在vue实例挂载的div中调用了`cpn2`,`cpn2`与`cpn1`形成父子组件关系。
> 注意:组件就是一个vue实例,vue实例的属性,组件也可以有,例如data、methods、computed等。
注册组件的语法糖
```html
<div id="app">
<cpn1></cpn1>
<cpn2></cpn2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
// 1.注册全局组件语法糖
Vue.component('cpn1', {
template:`
<div>
<h2>全局组件语法糖</h2>
<p>全局组件语法糖</p>
</div>`
})
const app = new Vue({
el:"#app",
components:{//局部组件创建
cpn2:{
template:`
<div>
<h2>局部组件语法糖</h2>
<p>局部组件语法糖</p>
</div>`
}
}
})
</script>
```
注册组件时候可以不实例化组件对象,直接在注册的时候实例化。`{}`就是一个组件对象。