VUE父子组件通信的七宗罪：你犯了几个？

2024-02-07 10:28

短信预约 -IT技能 免费直播动态提醒

父子组件通信是VUE开发中经常遇到的问题，本文将列举常见的七种错误，帮助大家避免陷入陷阱。

在父组件中直接操作子组件的data

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    incrementCount() {
      this.$refs.child.count++ // 这是错误的
    }
  }
}
</script>

在父组件中直接操作子组件的data很容易出错，因为子组件的数据是私有的，父组件不应该直接操作。正确的做法是通过props来传递数据，或者通过event来触发子组件的方法。

在子组件中直接修改父组件的data

<template>
  <div>
    <button @click="incrementCount">Increment Count</button>
  </div>
</template>

<script>
export default {
  props: ["count"],
  methods: {
    incrementCount() {
      this.$parent.count++ // 这是错误的
    }
  }
}
</script>

在子组件中直接修改父组件的data也是错误的，因为父组件的数据是私有的，子组件不应该直接操作。正确的做法是通过props来传递数据，或者通过event来触发父组件的方法。

在父组件中使用v-model来绑定子组件的data

<template>
  <div>
    <child-component v-model="count"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

在父组件中使用v-model来绑定子组件的data是错误的，因为v-model只能用于绑定父组件的数据。正确的做法是使用props来传递数据，或者通过event来触发子组件的方法。

在子组件中使用v-model来绑定父组件的data

<template>
  <div>
    <child-component v-model="count"></child-component>
  </div>
</template>

<script>
export default {
  props: ["count"],
  methods: {
    incrementCount() {
      this.$emit("increment-count")
    }
  }
}
</script>

在子组件中使用v-model来绑定父组件的data是错误的，因为v-model只能用于绑定子组件的数据。正确的做法是使用props来传递数据，或者通过event来触发父组件的方法。

在父组件中使用$emit来触发子组件的方法

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
export default {
  methods: {
    incrementCount() {
      this.$emit("increment-count") // 这是错误的
    }
  }
}
</script>

在父组件中使用$emit来触发子组件的方法是错误的，因为$emit只能在子组件中使用。正确的做法是通过props来传递数据，或者通过event来触发父组件的方法。

在子组件中使用$emit来触发父组件的方法

<template>
  <div>
    <button @click="incrementCount">Increment Count</button>
  </div>
</template>

<script>
export default {
  props: ["count"],
  methods: {
    incrementCount() {
      this.$emit("increment-count", this.count + 1)
    }
  }
}
</script>

在子组件中使用$emit来触发父组件的方法是错误的，因为$emit只能在父组件中使用。正确的做法是通过props来传递数据，或者通过event来触发子组件的方法。

使用Vuex来管理父子组件的数据

export default {
  data() {
    return {
      count: 0
    }
  },
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    incrementCount() {
      this.$store.commit("incrementCount")
    }
  }
}

使用Vuex来管理父子组件的数据是错误的，因为Vuex是全局的，而父子组件的数据应该是私有的。正确的做法是使用props来传递数据，或者通过event来触发子组件的方法。

以上是常见的七种父子组件通信的错误，希望大家能够避免这些错误，在实际开发中正确使用父子组件通信的方式。

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

VUE 父子组件 Props Events Vuex $ref .$attrs

阅读原文内容投诉