关于前端:Vue-组件注册方式

4次阅读

共计 2074 个字符，预计需要花费 6 分钟才能阅读完成。

无论是 Vue 还是 React，都有组件的概念。组件，顾名思义就是能和他人组合在一起的物件。在前端页面开发过程中，将一个页面划分成一个个小的模块，每个模块独自定义，每个模块就是一个组件。组件还能够进行复用，A 页面和 B 页面有一个类似的模块，能够抽离成一个可部分批改的组件。

组件化的概念让前端页面开发有了更清晰的构造。

Vue 中的组件就是一个 Vue 的实例对象。因而，Vue 组件的结构选项和 new Vue() 办法结构 Vue 实例的结构选项是一样的，其可接管的结构选项都是一样的。除了 el 这样 根实例 特有的选项。然而，Vue 组件必须得是能够复用的，因而，就必须要求结构选项中的 data 选项必须是一个函数，该函数返回一个对象。

为什么 data 选项是个返回对象的函数就能够保障组件的可复用性呢？

因为无论是 new Vue() 的形式还是定义 Vue 组件的形式创立一个 Vue 实例，其执行的操作都是将结构选项中的各属性值间接赋值给新创建的 Vue 实例对象。组件复用就是 Vue 应用 雷同的结构选项 结构出多个同名不同地址的 Vue 实例对象。如果 Vue 组件定义时的结构选项中的 data 选项是一个对象，那么在组件复用时，多个组件就会共用一个 data 数据对象，因为是间接将 data 对象的地址赋值给组件的 Vue 实例的。但如果组件定义时的 data 选项是一个函数的话，那么 Vue 依据结构选项创立组件时会执行该函数从而失去一个对象。这样一来，每次创立 Vue 实例时的 data 对象都是从新生成的，因而，多个组件都有各自的 data 数据对象，不会相互影响。

实际上，在组件注册时是在定义组件的结构选项，在组件应用时才真正创立对应的 Vue 组件实例。

全局注册的组件能够在 Vue 根实例和所有的子组件中应用。注册入口为 Vue.component() 函数，一次注册，随时应用，注册形式如下：

Vue.component('my-component-name',{options})

示例如下：

//main.js
// 此示例是在 vue-cli 创立的我的项目，默认是非完整版 vue，无奈用 template 选项，因而应用 render 函数写组件内容。Vue.component('all-test',{data(){
    return {x: '我是全局组件'}
  },
  render(h){return h('div',this.x)
  }
})

// 全局注册的组件间接应用即可
//App.vue
<template>
  <div id="app">
    <all-test />
  </div>
</template>

部分注册是通过一个一般的 JavaScript 对象来定义组件。而后组件的命名和注册入口是在 Vue 实例结构选项中的 components 选项。

let component = {options}

//new Vue 创立的根元素 Vue 实例
new Vue({
    el: '#app'
    components: {'my-component-name': component}
})

// 或注册 Vue 组件 创立的 Vue 实例
export default {
    components: {'my-component-name': component}
}

示例如下：

//App.vue
<template>
  <div id="app">
    <all-test />
    <component-a />
    <component-b />
  </div>
</template>

<script>
let ComponentA = {data(){
    return {x: '我是部分组件 A'}
  },
  render(h){return h('div',this.x)
  }
}

export default {
  name: 'App',
  components: {
    'component-a': ComponentA,
    'component-b': {data(){
          return {x: '我是部分组件 B'}
        },
        render(h){return h('div',this.x)
        }
    } 
  }
}
</script>

在应用了诸如 Babel 和 webpack 的模块零碎中能够应用 import 和 export 的形式独自导入组件的结构选项对象或者导入对应结构选项的 *.vue 文件。

//c.js
export default {data(){
        return {x: '我是 c.js 文件独自导出的组件结构选项对象'}
      },
      render(h){return h('div',this.x)
      }
}

//D.vue
<template>
    <div>
        {{x}}
    </div>
</template>

<script>
export default {data(){
        return {x: '我是 D.vue 文件导出的组件'}
    }
}
</script>

//App.vue
<template>
  <div id="app">
    <C />
    <D />
  </div>
</template>

import C from './c.js'
import D from './components/D.vue'

export default {
  name: 'App',
  components: {
    C,
    D 
  }
}
</script>

正文完