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

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

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

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

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

封装的组件如下：

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

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

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

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

封装组件

html – headTips/index.vue

<template>
  <div class="headTips">
    <van-nav-bar