vue单文件组件之自定义组件的使用

vue单文件组件之自定义组件的使用

1、首先需要将封装的组件放到公共组件文件夹

我这里是放在 common 里，里面一共封装了三个子组件，本文只拿其中的 pageList.vue 来举例。该组件是用来展示文章列表。

其中pagesList.vue的部分内容如下：

<template>

    <div>
      <!--文章列表-->
      <div class="noting" v-if="!this.pages">
        暂无数据
      </div>
      <div v-else>
        <ul id="video_list">
          <li v-for="item in pages" :key="item.id">
            <div class="page_item">
              <div class="pic" @click="toDetail(item.id)">
                <img :src="item.cover_pic" style="width: 180px; height: 130px" alt="">
              </div>
              <div class="content video">
                <h2 @click="toDetail(item.id)">{{item.title}}</h2>
                <div class="info">
                  <span class="create_time">阅读数：{{item.reads}}</span>
                  <span class="create_time">点赞数：{{item.zan}}</span>
                  <span class="create_time">评论数：{{item.comments}}</span>
                </div>
                <div class="author">
                  <span class="writer">作者：{{item.writer}}</span>
                </div>
                <div class="create_time">
                  <span class="create_time">发布时间：{{item.created}}</span>
                </div>
                 <p :title="item.abstract" class="abstract">简介：{{item.abstract}}</p> 
              </div>
              <div class="publish">
                <el-tag v-if="item.is_read" size="mini" class="tag" type="danger">已读</el-tag>
                <el-button type="primary" class="publish" @click="publish(item.id,item.audit_audit)">选用</el-button>
              </div>

            </div>
          </li>
        </ul>
      </div>
    </div>

</template>

<style scoped>
//样式省略
</style>
<script>
import Api from "../../api";
export default {
  //这里的两种props定义属性方式都可以
  // props: {
  //   pages: { type: Array, default: [] }
  // },
  props:['pages'],
  data() {
    return {};
  },
  created() {
    //this.$props可以获取父组件传来的参数和值
    console.log(this.$props);
  },
  methods: {
    toDetail(id) {},
    //搜索
    send_query() {
      this.getPages();
    },
    //获取列表
    getPages() {}
  }
};
</script>

<style scoped>

</style>

这里的 props 作用是将需要改变的属性传给父组件，data() 的作用是用来存放不需要被父组件改变的属性，初始化

2、在父组件中引入 pageList.vue 组件

这里在页面page.vue中引入该组件，代码如下：

<template>
  <div id="accountList">
    <v-pagelist :pages="pages"></v-pagelist>
  </div>
</template>
<script>
import pageList from "../../common/library/pageList";
export default {
  data() {
    return {
      pages: [
        {
          title: '2018年最推荐的5款20万左右的车型',
          writer: '懂哥',
          created: '2018-05-01',
          is_read: true,
          reads: '155100',
          zan: '6666',
          comments:'666'
        }
      ],
    };
  },
  components: {
    "v-pagelist": pageList
  },
  created() {
  },
  methods: {}
};
</script>

这些值当然是随便写的，根据自己需要灵活运用就好，有什么补充或不对请在评论区指出，本白也在学习的路上