vue如何封装可复用组件？举例说明封装过的组件

在src目录文件下新建一个components文件，在这个文件中可以创建复用的组件

在需要用的组件需要经过三步，一是导入要用的这个组件，二是：注册组件，三是使用组件

封闭性：当在组件定义好外部不能修改；开放性：将动态内容和组件通讯方式进行传递数据保证组件可扩展性；

总结：通过vue提供的组件通讯结合slot插槽来区分

封装的组件如下：

在components文件里创建一个你要封装的组件

在这个组件里面实现样式布局

在props接收数据，点击搜索按钮或回车时，触发this..$emit将数据传递给父组件

在父组件中导入注册使用组件

封装组件

html – headTips/index.vue

<template>
  <div class="headTips">
    <van-nav-bar :title="text" :left-arrow="shows">
      <template #right>
        <van-popover
          v-model="showPopover"
          theme="dark"
          trigger="click"
          :actions="actions"
          @select="onSelect"
          placement="bottom-end"
          :offset="[8, 20]"
        >
          <template #reference>
            <div class="rgimg" v-if="!showrg"></div>
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
  </div>
</template>

js

<script>
import { NavBar, Popover } from "vant";

export default {
  // 按需引入vant
  components: {
    [NavBar.name]: NavBar,
    [Popover.name]: Popover,
  },
  // 接收父组件参数
  props: {
  // 标题名称
    text: {
      type: String,
      default: "",
    },
    // 是否显示左边样式
    shows: {
      type: Boolean,
      default: null,
    },
    // 是否显示右边样式
    showrg: {
      type: Boolean,
      default: null,
    },
  },
  data() {
    return {
      // 气泡弹出框
      showPopover: false,
      actions: [
        { text: "首页",
          icon: require("./images/icon_02.png"),
          url: "/"
        },
        { text: "信贷",
          icon: require("./images/icon_03.png"),
          url: "/credit"
        },
        {
          text: "理财",
          icon: require("./images/icon_04.png"),
          url: "/financial",
        },
        {
          text: "保险",
          icon: require("./images/icon_05.png"),
          url: "/myDetails",
        },
      ],
    };
  },
  methods: {
  // 选中事件
    onSelect(action) {
      this.$router.push({
        path: action.url,
      });
    },
  },
};
</script>

为了方便项目优化在 router.js 配置属性完成封装

路由自定义参数

• 使用meta属性进行参数属性定义

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

// 避免路由重复点击引起的报错
//获取原型对象上的push函数
const originalPush = VueRouter.prototype.push
//修改原型对象中的push方法
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import(/* webpackChunkName: "home" */ '@/views/home'),
      meta: {
        // 不显示组件（可不写 默认为false）
        headTip: false,
      }
    },
    {
      path: '/noticeList',
      name: 'noticeList',
      component: () => import(/* webpackChunkName: "home" */ '@/views/noticeList'),
      meta: {
        // 是否显示组件
        headTip: true,
        // 组件名称
        headTipText: '公告通知',
        // 是否显示左边后退（可不填 默认true）
        showTiplf: true,
        // 是否显示右边更多（可不填 默认true）
        showTiprg: true,
      }
    },
  ]
});

export default router;

全局引用

• 为方便实用，在 app.vue 中进行判断并引用

<template>
  <div id="app">
    <headTips
      v-if="$route.meta.headTip"
      :text="$route.meta.headTipText"
      :shows="$route.meta.showTiplf"
      :showrg="$route.meta.showTiprg"
    />
    <router-view />
  </div>
</template>

import headTips from "@/components/headTips";

export default {
  name: "App",
  components: {
    headTips,
  },
};