Vue中引入自定义公共组件方法以及步骤

什么是公共组件，公共组件的使用场景

项目中如果多个页面都显示有相同的区域内容，则该公共区域内容可以封装成公共组件进行使用。

步骤：

1、创建自定义公共组件，在src下的components目录中自定义创建需要的公共组件

2、在main.js文件中将组件挂载到全局范围内。

至于如何挂载…en。。。。。

// 注册全局组件
import mylist from './components/Home/MyList.vue'
Vue.component('my-list', mylist)

就这样，就可以了…

3、在定义的组件内写入代码，有重点…

e，其实也没什么,就是在script中的name中声明组件名称比较规范一些。

<template>
  <div id="mobile">
    <ul>
      <li v-for="item in phone" :key="item.product_id">
        <router-link
          :to="{ path: 'details', query: { id: item.category_id } }"
          class="route"
        >
          <img :src="$target + item.product_picture" alt="" />
          <p>{{ item.product_name }}</p>
          <p>{{ item.product_title }}</p>
          <p class="price">
            <b>{{ item.product_selling_price }}元</b
            ><span v-if="item.product_selling_price !== item.product_price"
              >{{ item.product_price }}元</span
            >
          </p>
        </router-link>
      </li>
      <li class="last" v-if="!flag">
        <div @click="more">浏览更多<i class="el-icon-d-arrow-right"></i></div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "mylist",
  props: ["phone", "flag"],
  data() {
    return {};
  },

  methods: {
    more() {
      let arr = [];
      this.phone.forEach((item) => {
        if (arr.indexOf(item.product_id) == -1) {
          arr.push(item.category_id);
        }
      });
      var newArr = Array.from(new Set(arr));
      this.$arr.setMsg(newArr);
      this.$router.push({ path: "/goods", query: { categoryID: newArr } });
    },
  },
};
</script>

4、最后在页面中

<template>
  <div id="goods">
        <!-- 引入全局组件 -->
        <my-list :phone="listData" :flag="sum"></my-list>
  </div>
</template>
<script>
import CateApi from "../api/cate";
export default {
  name: "mylist",
  data() {
    return {
      sum: 1,
      activeIndex: "0",
      categoryID: [],
      currentPage: 1,
      pageSize: 15,

      listData: [], //商品数据
      nameData: [], //分类数据
      search: "", //搜索
      total: 0,
    };
  },
  created() {
    /*
      浏览更多
    */
    this.getMore();

    this.getlist("list");
    this.getlistName();
    let query = this.$route.query;
    // Object.keys()返回一个多有元素为字符穿的数组
    if (query.search) {
      this.search = query.search;
      this.searchList();
    }
    this.activeIndex = "-1";
  },
  watch: {
    // 监听分类切换时的状态
    activeIndex(val) {
      //组件切换是传递的是字符串类型，
      let index = Number(val);
      this.categoryID = [index]; //成员访问
      this.currentPage = 1;
      this.total = 0;
      this.search = "";
      if (index === 0) {
        this.categoryID = [];
        this.getlist("list");
      } else {
        this.getlist();
      }
    },
    $route(val) {
      if (val.query.search) {
        this.search = val.query.search;
        this.currentPage = 1;
        this.total = 0;
        this.activeIndex = "-1";
        this.searchList();
      }
    },
    // 分页数  据改变时
    currentPage() {
      this.getlist("list");
      if (this.search) {
        this.searchList();
      } else {
        this.getlist();
      }
    },
  },
  methods: {
    // 点击浏览更多
    async getMore() {
      this.categoryID = this.$arr.msg;
      console.log(this.categoryID);
      let type = {
        categoryID: this.categoryID,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      };
      const { data: res } = await CateApi.listClassify(type);
      this.listData = res.Product;
      this.total = res.total;
      console.log(res);
    },
    // 所有商品数据
    async getlist(apiName = "listClassify") {
      let type = {
        categoryID: this.categoryID,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      };
      const { data: res } = await CateApi[apiName](type);
      this.listData = res.Product;
      this.total = res.total;
    },
    // 获取分类名称
    async getlistName() {
      const { data: res } = await CateApi.nameList({});
      this.nameData = res.category;
      this.nameData.unshift({
        category_id: 0,
        category_name: "全部",
      });
    },
    // 搜索商品
    async searchList() {
      let type = {
        search: this.search,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      };
      const { data: res } = await CateApi.searchApi(type);
      this.listData = res.Product;
      this.total = res.total;
    },
    // 切换分页数据
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
};
</script>

重点来了

• 在name写入组件名称
• 在模板中直接引入即可

最后的最后

​ 各位同学一定要保护好头发呀！