1、什么是可复用的UI组件？

在 vue 中，我们可以通过 new Vue 来创建一个组件，不过通常它是作为整个应用的顶层根组件存在的，我们还可以通过另外的方式来注册一个更为通用的组件。不同于根组件，同一个可复用组件，可以在同一个应用中多次使用。

2、可复用UI组件的创建

可复用组件在构建选项上与全局组件基本一致（除了一些特殊设定，后续会讲）。
可复用组件可以像标签一些在模板中使用，Vue 会在解析过程中处理它们。

2-1、全局定义

Vue.component('组件名称', {组件选项})

可以在任意位置（多个不同的 Vue 应用中）使用。

2-2、局部定义

new Vue({
  ...,
  components: {
  	'组件名称': {组件选项}	
	}
})

局部组件只能在其定义的组件内使用，不能在其子组件内部使用。

3、组件内部私有数据（状态）

可复用组件的 data 必须是函数，且该函数必须返回一个对象作为组件最终的 data。

4、组件外部传入数据

如同一个函数一样，函数除了可以定义内部私有变量，有时候为了提高函数的复用性，我们通过会通过参数来接收外部传入的数据。组件也可以。

4-1、props

组件中内部私有数据存储中组件 data 中，通过外部传入的数据，则通过 props 选项接收。

首先，组件内部通过 props 来定义可以接收的数据名称，就像是函数的形参。

然后，在使用该组件的时候可以通过标签属性的方式进行传参（可配合 v-bind 传入表达式）。

注意事项

• 如果传入的 props 值为一个表达式，则必须使用 v-bind
• 组件中的 data 和 props 数据都可以通过组件实例进行直接访问
• data 中的 key 与 props 中的 key 不能冲突

5、组件通信

5-1、作用域隔离

为了保证数据安全性（传入的数据通常会在其它组件中也有使用），Vue 不推荐我们在组件内部直接修改传入的数据。

5-2、父组件到子组件内部的数据传递

父组件通过上述提到的 props 向一个子组件内部传递数据。

5-3、子组件内部到外部的数据传递

5-3-1、$emit()

vue 为每个组件对象提供了一个内置方法 $emit ，它等同于自定义事件中的 new Event,trigger 等

this.$emit('自定义事件名称', 事件数据)

• 事件数据就是中触发事件的同时携带传递的数据 - event

• 父级在使用该组件的过程中，可以通过 @事件名称 来注册绑定事件函数

• 事件函数的第一个参数就是事件数据

5-4、数据双向绑定

虽然并不推荐在组件内部修改 props ，但是，有的时候确实希望组件内部状态变化的时候改变 props ，我们可以通过子组件触发事件，父级监听事件来达到这个目的，不过过程会比较繁琐，vue 提供了一些操作来简化这个过程。

5-4-1、v-model

v-model 是 vue 提供的一个用于实现数据双向绑定的指令，用来简化 props 到 data，data 到 props 的操作流程。

5-4-1-1、model 选项

prop 指定要绑定的属性，默认是 value

event 指定要绑定触发的事件，默认是 input 事件

5-4-2、.sync

通过 v-model 来进行双向绑定，会给状态维护带来一定的问题，因为修改比较隐蔽，同时只能处理一个 prop 的绑定，我们还可以通过另外一种方式来达到这个目的。

5-4-2-1、update:[prop]

这里事件名称要使用 update 加上 prop 名称 的格式

5-5、ref 与 $refs

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件。

6、插槽

默认情况下，组件模板解析后会替换整个组件内容，如果我们想在组件引用被包含的内容，可以通过 vue 提供的内置组件 slot 来获取。

6-1、slot

Vue 提供了一个内置的组件 <slot>，用于在组件模板内定义插槽。解析过程中，会被该组件嵌套的子组件（元素）对应的内容所替换。

6-2、具名插槽

使用内置组件 template 与 v-slot 指令进行配置，用来命名插槽，在组件模板中，通过 <标签 v-slot:插槽名称> 来使用。

• 插槽名称默认为 default ，可以省略。

6-3、作用域插槽

组件内部与组件包含的内容属于不同的作用域（被包含的内容是组件父级下的作用域）。

组件到父级作用域下的子级通信。

• 组件内部通过 slot 的 attributes 进行数据传递。
• 子级通过 v-slot 指令的值进行接收。

// 组件内部
<slot v-for="user of users" :user="user"></slot>

// 组件外部子级
<template v-slot:default="data">
  <p>用户的姓名: {{data.user.username}}</p>
</template>

7、props 验证

组件的 props 就是组件的参数，为了确保传入的数据在可控的合理范围内，我们需要对传入的 props 的值类型进行必要的验证。

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

8、其它 props 相关知识点

8-1、非 prop 特性

一个非 prop 特性是指传向一个组件，但是该组件并没有相应 prop 定义的特性，这些 props 会被自动添加到组件的根元素上。

8-2、替换/合并已有的特性

默认情况下，非prop 特性的属性会覆盖组件根元素上同名的内容，但是针对 style 和 class 有特殊的处理，它们会合并（同名样式还是会覆盖）。

8-3、禁用特性继承

如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false，我们可以通过组件的 this.$attrs 来获取这些属性。

注意 inheritAttrs: false 选项不会影响 style 和 class 的绑定。

1.什么是在组件中复用组件呢？就是一个自定义组件后，在这个大组件里面还需要用到自己已经创建好的组件。

如图所示：

2.想要达成这样的效果主要分为三步（感觉和非单文件组件中嵌套组件差不多）

        （1）分别创建两个组件

        （2）在大组件即1中的组件A中导入组件

import Card from '../components/Card';
//import Card为自定义名称  from 组件路径

        （3）注册要复用的组件

<script>

import Card from '../components/Card';
export default {
  components:{Card}
//components:{复用组件名称}
};
</script>

        （4）在外层组件即1中组件A想要组件显示的地方写入自定义组件名即可

<Card></Card>

3.组件传参

        （1）被复用组件标签中

子组件中：

 <div class="title">{{name}}</div>
 <div>{{age}}</div>

子组件中： 

        （2）props简单声明接收

 props:['name','age']

父组件中： 

        （3）复用组件组件标签传具体值

 <Card name="yy" :age="100"></Card>
//通过属性传递数值
//默认传入值的类型是String,不支持运算，所以传入数值时最好动态绑定

对数值的类型做限制

  props:{
    name:String,
    age:Number
  }

4.尽量不直接修改传递过来的参数，因为控制台会报错，虽然功能可以实现。

示例：如果需要操作age，复制到data中，再去修改data中的数据

 

 

在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,
  },
};