文件管理案例

子组件内容

<template>
  <ul class="text">
    <nav>
      <router-link to="/" class="lieBao">
        <button @click="notify">列表视图</button>
      </router-link>
      |
      <router-link to="/about" class="WngLuo">
        <button>网络视图</button>
      </router-link>
      <input type="text" v-model="keyWord" @keyup="eventUp">
    </nav>
<!--    <li v-for="(item) in list" :key="item.id">{{ item }}</li>-->
    <li v-for="(item) in getName()" :key="item.id">{{ item }}</li>
  </ul>
</template>

<script>

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data: function () {
    return {
      list: ['text1', 'text2', 'text3', 'text4', 'text5'],
      flag: true,
      keyWord:''
    }
  },
  methods: {
    notify() {
      this.flag =! this.flag
      if (this.flag) {
        this.list.sort(function (a, b) {
          if (a < b) {
            return 1
          }
          if (a > b) {
            return -1
          }
          return 0
        })
      } else {
        this.list.sort(function (a, b) {
          if (a < b) {
            return -1
          }
          if (a > b) {
            return 1
          }
          return 0
        })
      }
    },
    eventUp(){

    },
    getName() {
      return this.list.filter((item) => {
        return item.includes(this.keyWord)
      })
    },
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
li {
  list-style: none;
}
</style>

---

第一个父组件页面

<template>
  <div class="home">
    <HelloWorld/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  },
}
</script>

---

第二个父组件页面

<template>
  <div class="about">
    <HelloWorld/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  }
}
</script>
<style scoped lang="less">
ul{
  margin: auto;
  width: 400px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
</style>