Vue父子组件通信全面详细介绍

我来为你详细讲解Vue父子组件通信的攻略。

什么是Vue组件通信

在Vue中，组件是指封装了HTML、CSS和JavaScript的功能单元，用于构建Web应用。组件化开发可以帮助开发者更好地管理和组织复杂的UI，提高代码复用性。

Vue组件通信是指在Vue应用中，不同组件之间进行数据传递和事件触发的过程。由于Vue使用了单向数据流的原则，所以Vue组件通信分为父组件向子组件传递数据和子组件向父组件传递数据两种情况。

父组件向子组件传递数据

通过props传递数据

Vue组件中最基本的通信方式就是通过props传递数据。父组件可以通过props属性把数据传递给子组件。

父组件：

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

子组件：

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

在父组件中，通过:message="parentMessage"将parentMessage这个数据通过props传递给子组件。在子组件中，通过props: ['message']来声明props，在模板中使用的时候直接使用message就可以了。

通过$emit传递事件

如果需要子组件向父组件传递数据，可以使用$emit触发父组件的事件。在子组件中，可以使用$emit来触发指定事件。

父组件：

<template>
  <div>
    <child-component @child-event="handleChildEvent"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildEvent(data) {
      console.log(data)
    }
  }
}
</script>

子组件：

<template>
  <button @click="sendData">Send Data</button>
</template>
<script>
export default {
  methods: {
    sendData() {
      this.$emit('child-event', 'data from child')
    }
  }
}
</script>

在子组件中，通过$emit函数，触发一个名为child-event的事件，并传递了一个字符串data from child作为参数。在父组件中，可以使用@child-event="handleChildEvent"监听这个事件，并在事件处理函数中接收传递的数据。

子组件向父组件传递数据

通过$refs获取子组件实例

在某些情况下，比如需要调用一个子组件中的方法，或者获取子组件中的数据，需要获取到子组件实例。在Vue中，可以使用ref属性来获取子组件的实例。

父组件：

<template>
  <div>
    <child-component ref="childRef"></child-component>
    <button @click="getChildData">Get Child Data</button>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  },
  methods: {
    getChildData() {
      const childInstance = this.$refs.childRef
      console.log(childInstance.message)
    }
  }
}
</script>

子组件：

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello from child'
    }
  }
}
</script>

在父组件中，通过ref属性声明子组件的引用，在方法中使用this.$refs.childRef来获取子组件实例。而在子组件中，则通过data属性存储了需要传递的数据。

通过$parent访问父组件实例

如果需要访问父组件的数据或触发父组件的事件，可以使用$parent属性访问父组件实例。

父组件：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

子组件：

<template>
  <button @click="sendData">Send Data</button>
</template>
<script>
export default {
  methods: {
    sendData() {
      this.$parent.parentMessage = 'data from child'
    }
  }
}
</script>

在子组件中，通过this.$parent来访问父组件实例，并对需要传递的数据进行修改即可。此时，在父组件中也可以访问子组件传递的数据了。