Vue实现TodoList的方式：第三版——父子组件传参，组件化emit实现

父组件

<template>
  <div
    id="app"
    style="border:solid 2px black"
  >
    <div id="nav">
      <router-link to="/home">进入主页</router-link>
      <div>
        <h1>我是TodoList3的父组件</h1>
        <input
          v-model="inputValue"
          type="text"
        />
        <button @click="addDataToList">添加</button>
        <!-- 显示子组件的结果 -->
        <list-item
          :list="list"
          @delDataFromList='delDataFromList'
        ></list-item>
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>

import ListItem from './TodoList3'
/**
 *1. 父组件引入子组件
 */
export default {
  name: 'Welcome',
  data() {
    return {
      list: [],
      inputValue: ''
    }
  },
  components: {
    //显示子组件
    ListItem
  },
  created() {},
  mounted() {},
  methods: {

    addDataToList() {
      if (this.inputValue.length === 0) {
        return '长度为0不添加'
      }
      this.list.push(this.inputValue)
      this.inputValue
    },
        /**
     * @delDataFromList 即为子组件通过 $emit 触发的自定义事件，
     * 触发 delDataFromList 方法。
     */
    delDataFromList(index) {
      this.list.splice(index, 1)
    }
  },
  computed: {}
}
</script>

<style scoped lang="scss"></style>

子组件

<template>
  <div style="border:solid 2px red">
    <h1>我是TodoList3组件</h1>
    <div
      v-for="(item,index) in list"
      :key="index"
      @click="delDataFromList(index)"
    >{{item}}</div>
  </div>
</template>

<script>
/**
 * emit 触发父组件方法
  emit 触发父组件方法，进而修改父组件的 list，是通常所说的单项数据流。单项数据流体现了软件工程封闭开放原则，类似 Java 的 Get 和 Set，只有通过类的内部方法才能修改类内变量。
  Vue 的 emit 方法可以触发绑定在组件上的自定义事件。
 */

/**
 * 最新体会，props，是和父组件的公共数据
 */
export default {
  name: 'List',
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {}
  },
  components: {},
  created() {},
  mounted() {},
  methods: {
    delDataFromList(index) {
          //调用父组件的方法
      this.$emit('delDataFromList', index)
    }
  },
  computed: {}
}
</script>

<style scoped lang="scss">
</style>