我是怎么学会vue的14:组件的基本使用

白话前端

组件化,即把整个页面拆分成一个个组件,开发一个个独立、可复用的小组件,即可构建起一个应用。这样可以让代码更方便的组织和管理,扩展性也更强。

开发出来的应用会形成一个组件树(树结构是一种数据结构)。

组件化与模块化不同,后面会讲到模块化,并对比组件和模块的区别。

封装组件的步骤

  1. 创建组件构造器 Vue.extend() 需要传入一个对象

    Vue.extend创建的是一个组件构造器,通常在创建构造器时,传入template作为我们自定义组件的模板。

    Vue.component这种写法在2.X文档中几乎看不到了,一般使用语法糖的形势来写。见下文。

  2. 注册组件(全局注册、局部注册)

    Vue.component(注册组件的标签名,组件构造器)

    Vue.component()是把刚才的组件构造器注册为一个组件,并且给它起一个组件的标签名称,所以需要传递2个参数。

  3. 使用组件(在Vue实例的作用域之内来使用组件)

演示:

<div id="app">
  <!--3.使用组件  需要在实例内使用-->
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
</div>

<script src="../js/vue.js"></script>
<script>
  // 1.创建组件构造器对象 传入的是一个对象
  const cpnC = Vue.extend({
    template: `
      <div>
        <h2>我是标题</h2>
        <p>我是内容</p>
      </div>`
  })

  // 2.注册组件
  Vue.component('my-cpn', cpnC)

  const app = new Vue({
    el: '#app',
    data: {
     
    }
  })
</script>

全局组件和局部组件

封装组件的第二步是注册组件,在全局下注册的就是全局组件,在某个实例中注册的就是局部组件。

真实开发中用局部组件的比较多。

全局组件

全局组件可以在多个vue实例里面使用。但是真实开发中一般只有一个vue实例,所以全局组件用的比较少。

<div id="app">
  <cpn></cpn>
  <cpn></cpn>
</div>

<div id="app2">
  <cpn></cpn>
</div>

<script>
  // 1.创建组件构造器
  const cpnC = Vue.extend({
    template: `
      <div>
        <h2>我是标题</h2>
        <p>我是内容</p>
      </div>
    `
  })

  const app = new Vue({
    el: '#app',
  })
  const app2 = new Vue({
    el: '#app2'
  })
   
  // 2.注册组件(全局组件, 意味着可以在多个Vue的实例下面使用)
  //这个组件注册在全局下面,所以是全局组件
  Vue.component('cpn', cpnC)
</script>

局部组件

注册在Vue实例下面的,就是局部组件。局部组件只能在注册的那个实例里面使用。

局部组件注册方法:

const app = new Vue({
    el: '#app',
    components: {
      // 使用组件时的标签名,组件构造器
      cpn: cpnC
    }
})

代码演示:

<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>

<script>
  const cpnC = Vue.extend({
    template: `
      <div>
        <h2>我是标题</h2>
        <p>我是内容</p>
      </div>
    `
  })

  const app = new Vue({
    el: '#app',
    components: {
      // cpn使用组件时的标签名
      cpn: cpnC
    }
  })
</script>

使用语法糖注册组件

前面说到Vue.extend这种写法已经很少见了,现在都使用语法糖的写法。

使用语法糖注册全局组件

<div id="app">
  <cpn1></cpn1>
</div>

<script src="../js/vue.js"></script>
<script>
Vue.component('cpn1', {
    template: `
      <div>
        <h2>我是标题</h2>
        <p>我是内容</p>
      </div>
    `
})

const app = new Vue({
    el: '#app'
})
</script>

使用语法糖注册局部组件

<div id="app">
  <cpn2></cpn2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    components: {
      'cpn2': {
        template: `
          <div>
            <h2>我是标题2</h2>
            <p>我是内容</p>
          </div>
    `
      }
    }
  })
</script>

使用模板分离的写法注册组件

上面演示中,在template里面写了很多html标签,看起来很乱;我们需要把这些HTML标签分离出来,有2种分离的写法。

写法1:使用script标签(不常用)

  • 把html标签放到script标签里面
  • 注意:script的类型必须是text/x-template,并加上id属性
  • 最后挂载到对应的组件上template: '#cpn'
<div id="app">
  <cpn></cpn>
  <cpn></cpn>
</div>

<script type="text/x-template" id="cpn">
<div>
  <h2>我是标题</h2>
  <p>我是内容</p>
</div>
</script>

<script src="../js/vue.js"></script>
<script>
  // 注册一个全局组件
  Vue.component('cpn', {
    template: '#cpn'
  })

  const app = new Vue({
    el: '#app'
  })
</script>

写法2:使用template标签(常用)

  • 把标签放到template标签里面,并加上id属性
  • 再挂载到对应的组件上template: '#cpn'
<div id="app">
  <cpn></cpn>
  <cpn></cpn>
</div>

<template id="cpn">
  <div>
    <h2>我是标题</h2>
    <p>我是内容</p>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  // 注册一个全局组件
  Vue.component('cpn', {
    template: '#cpn'
  })

  const app = new Vue({
    el: '#app'
  })
</script>
阅读 850

100 声望
7 粉丝
0 条评论
100 声望
7 粉丝
文章目录
宣传栏