全局组件与局部组件,父组件与子组件

 全局组件和局部组件

​ 组件的注册方式有两种,一种是全局组件一种是局部组件。

```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>
```

注册组件时候可以不实例化组件对象,直接在注册的时候实例化。`{}`就是一个组件对象。
posted @ 2021-04-23 10:13  好吗,好  阅读(165)  评论(0)    收藏  举报