Vue训练营-自定义组件

项目截图

GitHub地址

由于这次作业比较简单,所以代码集成到上次的TodoList的项目中.主界面通过路由进行界面切换.

---

技术点

只要技术点包括:

1. Vue自定义组件
2. Vue组件间通信

自定义组件就不多说了,直接看官网即可.

Vue组件间通信方式包括：

1. 父->子,使用props传值.
2. 子->父,使用$emit,$on发送和监听事件.
3. 兄弟组件,使用Bus(即new Vue)进行组件间通信.
4. 进阶,使用Vuex.

---

核心代码

简单注解：

1. 展示页面(SelectPage.vue)
2. 自定义Select组件(CustomSelect.vue)
3. 自定义List组件(CustomList.vue)

为了便于理解,不贴css代码了.个人觉得实现过程中最难的就是css实现,我这里使用了课件中的css文件.

展示页面

<template>
<div class="box">
  <div class="wrap">
    <h1>城市列表</h1>
    <custom-select :list="citys" btnTitle="Search"></custom-select>
  </div>
  <div class="wrap">
    <h1>技能列表</h1>
    <custom-select :list="skills" btnTitle="Search"></custom-select>
  </div>
</div>
</template>

<script>
import CustomSelect from '../components/CustomSelect'
export default {
  name: 'SelectPage',
  components: {
    'custom-select': CustomSelect
  },
  data () {
    return {
      citys: ['北京', '上海', '广州', '青岛'],
      skills: ['Java', 'Android', 'Vue', 'PHP']
    }
  }
}
</script>

自定义SELECT组件

<template>
<div class="wrap">
  <div class="searchIpt clearFix">
    <div class="clearFix">
      <input type="text" class="KeyWord" :value="inputValue" @click="showList">
      <input type="button" :value="btnTitle">
      <span></span>
    </div>
    <custom-list v-if="selectShow" :list="list" @receiveValue="changeValueHandle"></custom-list>
  </div>
</div>
</template>

<script>
import CustomList from './CustomList.vue'
export default {
  name: 'CustomSelect',
  props: ['list', 'btnTitle'],
  components: {
    'custom-list': CustomList
  },
  data () {
    return {
      selectShow: false,
      inputValue: ''
    }
  },
  methods: {
    showList () {
      this.selectShow = !this.selectShow
    },
    changeValueHandle (value) {
      this.inputValue = value
    }
  }
}
</script>

自定义的List列表组件

<template>
<ul class="list">
    <li v-for="(item, index) in list" @click="seleceValueHandle(item)">
    {{item}}
    </li>
</ul>
</template>

<script>
export default {
  name: 'CustomList',
  props: ['list'],
  methods: {
    seleceValueHandle (item) {
      this.$emit('receiveValue', item)
    }
  }
}
</script>