props 和 $emit

文件示意

一个父页面 index.vue
两个组件 Input.vue List.vue

父页面 index.vue

<template>
  <div>
    父页面使用组件，给予子页面事件 add、delete，给予props参数 list
    <Input @add="addHandler" />
    <List :list="list" @delete="delHandler" />
  </div>
</template>
<script>
/* 引入组件 */
import Input from '@/components/Input.vue'
import List from '@/components/List.vue'
export default {
  components: {
    Input,
    List
  },
  data () {
    return {
      list: []
    }
  },
  methods: {
    /* 给List列表增加一个项目的方法，通过事件add传递给子组件 */
    addHandler (title) {
      this.list.push({
        id: `id-${Date.now()}`,
        title
      })
    },
    /* 同理删除一个项目的方案 */
    delHandler (id) {
      this.list = this.list.filter(item => item.id !== id)
    }
  }
}
</script>

子组件 List.vue

<template>
  <ul>
    从父页面得到的数据list，循环显示出来
    <li v-for="(item) in list" :key="item.id">
      {{item.title}}
      <button @click="del(item.id)">删除</button>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {

    }
  },
  methods: {
    /* 本页面用来删除列表的功能 */
    del (id) {
      /* 列表信息是在父页面的，所以通过父页面给的事件delete来告知父页面执行删除操作 */
      this.$emit('delete', id)
    }
  }
}
</script>

<style>

</style>

子组件 Input.vue 也是同理

<template>
  <div>
    <input type="text" v-model="title">
    <button @click="addTitle">添加</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: ''
    }
  },
  methods: {
    addTitle () {
      // 调用父组件的事件
      this.$emit('add', this.title)
      this.title = ''
    }
  }
}
</script>

整个过程就是，父组件下发数据给子组件显示，子组件要修改数据都是需要通过父组件给的事件，让事件去触发父页面的处理数据的方法。