详解vue.js组件化开发

什么是组件？

组件：就是一个带着名字的可复用vue实例

组件实现的步骤？

实例代码：

    

    

    

    

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>

<script>

// 1、创建组件构造器对象

const cpnC = Vue.extend({

  template: `

      

        

Title

        

Context

      

`

})

 

//2、注册组件

Vue.component('my-cpn', cpnC);

//实例化vue对象

const app = new Vue({

  el: '#app',

  data: {

  },

  methods: {

  }

})

script>

组件实现说明：

1、创建组件构造器：Vue.extend(将模板添加到里面)，其实现在已经不用这种格式了，但是不管我们怎么进行创建，底层还是一样的。

2、注册组件:Vue.component('使用标签名','注册标签名')

（1）全局组件：vue实例外注册的组件

（2）局部组件：vue实例内部注册的组件

3、使用组件:（必须在vue实例关联的dom文件中）

   

 

什么是组件化？

组件化：是一种思想，解决对复杂问题简单化的思想，将我们的程序开发成一个个独立可复用的小组件，然后用这些个小组件来构造出我们的应用。

如下图：

 

组件化开发的好处？

灵活可扩展，复用性强…

 

组件化开发整体流程？

1、封装组件

2、导入已经封装好的组件

3、在使用页面注册被使用组件

4、使用已封装好的组件

 

代码实例：

一、需要封装的组件：个人认为组件的封装还是比较简单的，任何功能需要重复使用都可以进行封装成组件

<template>

  

  <div>

    Hello EveryOne! I'm Jason!

  div>

template>

<script>

export default {

  name: "HelloTest"

}

script>

<style scoped>

style>

二、使用组件：这个一般都是比较固定的流程，先是引入要使用的组件，然后注册引入的组件，最后就可以直接使用了

<template>

  <div>

    

    <HelloTest>HelloTest>

  div>

template>

<script>

// 导入要使用的组件

import HelloTest from './hello'

export default {

  name: "hello",

  // 注册组件

  components: {

    HelloTest

  }

}

script>

<style scoped>

style>