对vue父子通信的理解

目录

问题：子组件嵌套子组件，最底层的子组件传父失败

思路：

最终解决

代码

---

问题：子组件嵌套子组件，最底层的子组件传父失败

思路：

之前在写一个案例的时候，因为是子组件嵌套子组件的形式，而第二层的子组件又需要修改来自父组件app.vue的数据，我当时就在想，中间的那层也是子组件啊，其props数据是只读的，怎么请求修改？难不成在中间的这一层子组件上再使用一次this.$emit？

最终解决

我犯傻了，直接和普通子传父一样，在父组件里用v-model接收即可，

归纳一下就是，父传子，可以一层一层对数据做处理并传给下级的子组件，例如把id：item的数据传递给再下级的子组件，从而显示遍历不同id的内容，而子传父只需要直接向存放数据的父组件发送请求即可，以下是代码

代码

app.vue代码

<template>
  <div class="table-case">
    <my-table :data="goods">
      <!-- 控制表头 -->
      <template #head>
        <th>编号</th>
        <th width="100px">标签</th>
        <th>名称</th>
        <th>图片</th>
      </template>

      <!-- 控制每一行 -->
      <template #row="{ item, index }">
        <td>{{ index + 1 }}</td>
        <td>
          <my-tag v-model="item.tag"></my-tag> //数据在这一行
        </td>
        <td>{{ item.name }}</td>
        <td>
          <img :src="item.picture"/>
        </td>
      </template>
    </my-table>
  </div>
</template>

 第二层代码，中间层的省略了

<template>
  <div class="my-tag" @dblclick="open">
    <input
      v-if="edit"
      class="input"
      type="text"
      ref="inp"
      v-model="tag"
      @blur="close"
      @keyup.enter="handleEnter"
    />
    <div v-else class="text">{{ value }}</div>
  </div>
</template>

<script>
export default {
  props: {
    value: String
  },
  data () {
    return {
      edit: false,
      tag: ''
    }
  },
  methods: {
    open () {
      this.edit = true 
      this.tag = this.value // 回显
    },
    close () {
      this.edit = false
    },
    handleEnter () {
      if (this.tag.trim() === '') return
      this.$emit('input', this.tag) //这里发送请求并携带tag，也就是用于覆盖原数值的数据
      this.edit = false
    }
  }
}
</script>