Vue.js传值秘籍：六种方法轻松搞定父子组件通信

2023-02-09 17:40:08

Vue.js 父子组件通信指南

在 Vue.js 中，构建复杂而可重用的 UI 组件时，父子组件之间的有效通信至关重要。本文将探讨六种广泛使用的 Vue.js 父子组件通信方法，帮助您掌握跨组件数据传递的技巧。

1. props：单向数据流

props 是将数据从父组件传递到子组件的最基本方法。父组件使用 props 向子组件提供数据，子组件通过 props 接收并使用这些数据。

示例：

父组件：

<template>
  <child-component :message="message"></child-component>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from parent!'
    }
  }
}
</script>

子组件：

<template>
  <p>{{ message }}</p>
</template>

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

2. emit：子组件主动通信

与 props 相反，emit 允许子组件向父组件发出事件，从而实现数据反向流。父组件通过监听子组件发出的事件来响应并接收数据。

示例：

父组件：

<template>
  <child-component @message="handleMessage"></child-component>
</template>

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log(message)
    }
  }
}
</script>

子组件：

<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from child!')
    }
  }
}
</script>

3. ref：访问子组件实例

ref 属性使父组件能够访问子组件的实例，从而允许直接操作和修改子组件。

示例：

父组件：

<template>
  <child-component ref="child"></child-component>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.child)
  }
}
</script>

子组件：

<template>
  <p>{{ $parent.message }}</p>
</template>

<script>
export default {
  mounted() {
    console.log(this.$parent)
  }
}
</script>

4. watch：监听子组件数据变化

watch 选项允许父组件观察和响应子组件数据的变化。当子组件数据发生变化时，父组件中的 watch 函数将被触发，执行相应的操作。

示例：

父组件：

<template>
  <child-component :message="message"></child-component>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from parent!'
    }
  },
  watch: {
    message: {
      handler(newValue, oldValue) {
        console.log(`Message changed from ${oldValue} to ${newValue}`)
      },
      deep: true
    }
  }
}
</script>

子组件：

<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: ['message'],
  watch: {
    message: {
      handler(newValue, oldValue) {
        console.log(`Message changed from ${oldValue} to ${newValue}`)
      },
      immediate: true
    }
  }
}
</script>

5. provide/inject：跨级组件通信

provide/inject 机制允许祖先组件向其后代组件提供和注入数据，实现跨层级组件间的通信。

示例：

祖先组件：

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

<script>
export default {
  provide() {
    return {
      message: 'Hello from parent!'
    }
  }
}
</script>

后代组件：

<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  inject: ['message'],
  mounted() {
    console.log(this.message)
  }
}
</script>

6. 自定义事件：灵活的事件驱动的通信

自定义事件提供了一种自定义和灵活的方式来实现组件之间的通信。您可以创建和触发自定义事件，并由其他组件监听和响应这些事件。

示例：

父组件：

<template>
  <child-component @message="handleMessage"></child-component>
</template>

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log(message)
    }
  }
}
</script>

子组件：

<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from child!')
    }
  }
}
</script>