Vue开发父子组件通信的坑

2023-12-02 19:48:02

父子组件通信：Prop和事件的应用与疑难解答

在Vue.js中，父子组件通信至关重要，因为它允许应用程序组件化和重用。Vue.js提供两种主要方式进行父子组件通信：Prop和事件。

Prop：父到子数据流

Prop（全称properties）是父组件向子组件传递数据的单向绑定。当父组件更新prop时，子组件中的数据也会更新，而反之则不行。

// 父组件
<template>
  <child-component :message="message"></child-component>
</template>

<script>
export default {
  data() {
    return {
      message: '你好，世界！'
    }
  }
}
</script>

// 子组件
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message']
}
</script>

在这个例子中，父组件向子组件传递一个名为“message”的prop。当父组件中的message数据更新时，子组件中的message数据也会自动更新。

需要注意的是，Prop传递的对象是引用类型，而不是值类型。 这意味着子组件对对象的修改不会影响父组件中的对象。

事件：子到父通信

事件是子组件向父组件发送消息的单向绑定。当子组件触发一个事件时，父组件可以监听该事件并执行响应操作。

// 父组件
<template>
  <child-component @update-message="handleUpdate"></child-component>
</template>

<script>
export default {
  methods: {
    handleUpdate(newMessage) {
      this.message = newMessage
    }
  }
}
</script>

// 子组件
<template>
  <button @click="updateMessage">更新消息</button>
</template>

<script>
export default {
  methods: {
    updateMessage() {
      this.$emit('update-message', '新消息！')
    }
  }
}
</script>

在这个例子中，子组件定义了一个“update-message”事件，并将其绑定到一个按钮上。当按钮被点击时，子组件触发事件，将“新消息！”传递给父组件。父组件监听该事件并更新其message数据。

Prop对象修改问题及解决方案

当父组件传递一个对象作为prop时，子组件对该对象的修改不会影响父组件中的对象。这是因为JavaScript中的对象是引用类型，传递的是对象的引用，而不是值。

解决方案：使用Vue.set()方法强制更新对象。

// 父组件
<template>
  <child-component :message="message"></child-component>
</template>

<script>
export default {
  data() {
    return {
      message: {
        age: 17
      }
    }
  },
  methods: {
    updateMessage() {
      this.$set(this.message, 'age', 18)
    }
  }
}
</script>

// 子组件
<template>
  <div>{{ message.age }}</div>
</template>

<script>
export default {
  props: ['message']
}
</script>