vue封装组件js版基本步骤

下面是关于"Vue封装组件JS版基本步骤"的完整攻略：

一、Vue组件封装概述

Vue组件是Vue框架中最核心的概念之一，组件可以被看做是一个大型的Vue实例，其内部包含了完整的Vue特性，如计算属性、指令、生命周期等。我们可以通过封装Vue组件，将组件的代码逻辑和样式在一个地方进行统一管理，提高代码的复用性和可维护性。

二、Vue组件封装基本步骤

Vue组件的封装过程，通常需要经过以下步骤：

1. 定义组件

在Vue框架中，组件可以通过Vue构造函数或Vue.extend来创建。我们把组件的代码放置在单独的js文件中，通过export导出，以便在其他地方方便地引用组件

2. 注册组件

在Vue应用程序中，我们需要将组件注册到Vue实例中，以便在模板中使用该组件。常见的注册方法有全局和局部注册两种方式。在组件注册的过程中，往往需要为组件分配一个名字，以便在模板中调用组件时使用。

3. 使用组件

当组件注册完成后，我们就可以在Vue模板中使用该组件。组件名称通常采用短横线命名方式，以便于和HTML标签进行区分。我们将组件置于Vue模板中的位置，即可在浏览器中渲染出该组件。

三、Vue组件封装实例

下面，我们通过一个具体的实例，来了解如何进行Vue组件封装。

实例一：Vue组件 - 面包屑组件

1. 定义组件

我们先通过Vue.extend()方法来创建并导出一个面包屑组件BreadCrumb

import Vue from 'vue'
export default Vue.extend({
  name: 'BreadCrumb',
  props: {
    list: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  render(h) {
    const that = this;

    const pathTo = function(item) {
      const hasChildren = item.children && item.children.length > 0;
      const routerLink = hasChildren ? '' : h('router-link', { props: { to: item.href } }, item.text);
      const activeClass = item.isActive ? 'is-active' : '';
      return h('li', { class: activeClass }, [routerLink])
    };

    return h('nav', { class: 'breadcrumb' }, [
      h('ul', { class: 'breadcrumb-list' }, [
        h('li', { class: 'breadcrumb-item' }, [h('a', { on: { click: function() {that.$router.push({ path: '/' });} } }, '首页')]),
        this.list.map((item, index) => pathTo(item))
      ])
    ]);
  }
})

上面的代码中，我们使用Vue.extend()来创建面包屑组件BreadCrumb；props中定义了面包屑的数据list，该数据的默认值为空数组；render函数用于生成组件的DOM结构。

2. 注册组件

接下来，我们把BreadCrumb组件注册到Vue应用程序中，以便在整个项目中使用。

import BreadCrumb from 'components/BreadCrumb.vue'
export default {
  components: {
    BreadCrumb
  }
}

上面的代码中，我们通过import语句引入BreadCrumb组件，再在Vue实例的components属性中进行注册。

3. 使用组件

在Vue模板中调用BreadCrumb组件，并传入数据。

<template>
  <div class="container">
    <BreadCrumb :list="pathList"/>
    <!-- 其他组件内容 -->
  </div>
</template>
<script>
import BreadCrumb from 'components/BreadCrumb.vue'
export default {
  name: 'HomePage',
  components: { BreadCrumb },
  data() {
    return {
      pathList: [
        { text: '首页', href: '/', isActive: false },
        { text: '文章', href: '/article', isActive: true }
      ]
    }
  }
}
</script>

我们可以通过属性绑定将组件的数据传递到组件中，代码中的:pathList即为组件需要的数据列表。

实例二：Vue组件 - 二级菜单组件

接下来，我们再了解一个二级菜单组件的封装过程。

1. 定义组件

我们通过 Vue.extend() 方法来生成组件，需要实现组件的数据绑定，模版的渲染功能。代码如下：

import Vue from 'vue'
export default Vue.extend({
  name: 'SubMenu',
  props: {
    menuList: {
      type: Array,
      default: []
    },
    selectItem: {
      type: Object,
      default: null
    }
  },
  methods: {
    selectMenu(menu) {
      this.$emit('select-menu', menu);
    }
  },
  render(h) {
    const that = this;

    return h('ul', { class: 'menu-list' }, [
      that.menuList.map((item, index) => {
        const itemPath = item.path === '' ? '/' : item.path;
        const isActive = that.selectItem && that.selectItem.path === item.path;
        const hasSubMenu = Array.isArray(item.children) && item.children.length > 0;

        const subMenu = hasSubMenu ? h(Submenu, { props: { menuList: item.children, selectItem: that.selectItem }}) : null;

        const subMenuIcon = hasSubMenu ? h('i', { class: 'el-icon-arrow-right' }) : null;

        const linkParams = { class: isActive ? 'active' : '' };

        if (hasSubMenu) {
          linkParams.on = { click: function() {that.selectMenu(item)} };
        }

        return h('li', { class: hasSubMenu ? 'submenu' : 'menu-item' }, [
          h('a', linkParams, [item.name, subMenuIcon]),
          subMenu
        ])
      })
    ]);
  }
})

上面的代码中，我们通过Vue.extend()方法来创建了一个可以递归渲染菜单的组件SubMenu。在代码中，我们必须实现组件的props数据绑定、方法定义以及模板的渲染和生成。

2. 注册组件

将创建的SubMenu组件注册到全局或局部组件，以便在Vue应用程序中可以使用该组件。

import Submenu from 'components/Submenu.vue'
export default {
  components: { Submenu },
  // ...
}

上面的代码中，我们通过import语句导入Submenu组件，并在Vue实例的components属性中进行注册。

3. 使用组件

在项目中，可以通过属性绑定的方式来传递SubMenu组件的数据，从而在模板中调用。

<template>
  <div class="menu-container">
    <SubMenu :menu-list="menuList" :select-item="selectedMenu" @select-menu="onMenuSelect"/>
  </div>
</template>
<script>
import SubMenu from 'components/SubMenu.vue'
export default {
  name: 'MenuPage',
  components: { SubMenu },
  data() {
    return {
      menuList: [
        { name: '主页', path: '/', children: [] },
        { name: '分类', path: '/category', children: [{ name: '汽车新闻', path: '/category/news' }] },
        { name: '关于我们', path: '/about', children: [] },
      ],
      selectedMenu: null
    }
  },
  methods: {
    onMenuSelect(menu) {
      this.selectedMenu = menu;
    }
  }
}
</script>

在上面的代码中，我们通过属性绑定来传递Menu组件所需要的数据，如menu-list和select-item。通过监听select-menu事件，我们可以在回调函数中处理菜单的选择逻辑。

四、小结

通过以上实例，我们可以对Vue组件的封装步骤、方法以及组件的使用有了更为深入的理解。在实际的编写中，我们应该遵循统一的封装约定，以便于代码的重用和维护。