vue父子组件进行通信方式原来是这样的

我会详细讲解Vue父子组件进行通信的方式，包括三种方式：props、事件、$refs。

Props

props 是父组件向子组件传递数据的一种方式。父组件可以通过定义子组件的 props，来向子组件传递数据。子组件可以通过 this.$props 来访问 props 中的值。下面是一个示例：

父组件：

<template>
  <div>
    <child :message="message"></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: { Child },
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

子组件：

<template>
  <div>
    {{ $props.message }}
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

在这个示例中，父组件向子组件 Child 传递了一个名为 message 的属性。在子组件中，我们通过 this.$props.message 来访问这个值。

事件

另一种父子组件之间的通信方式是通过事件来实现的。这里使用 Vue 实例的 $emit 方法来触发一个事件，然后在父组件中监听该事件，从而接收到子组件中传递的数据。

父组件：

<template>
  <div>
    <child @child-event="handleChildEvent"></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: { Child },
  methods: {
    handleChildEvent(data) {
      console.log('Received data from child:', data)
    }
  }
}
</script>

子组件：

<template>
  <div>
    <button @click="handleClick">Click me!</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('child-event', 'Hello, world!')
    }
  }
}
</script>

在这个示例中，子组件中的 handleClick 方法触发了一个名为 child-event 的事件，并传递了一个字符串 'Hello, world!'。父组件中的 handleChildEvent 方法通过 $event 参数接收到这个值，并进行了打印输出。

$refs

最后一个父子组件之间的通信方式是通过 $refs。这种方式不是父组件向子组件传递数据，而是父组件直接访问子组件中的属性或方法。

父组件：

<template>
  <div>
    <child ref="child"></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: { Child },
  mounted() {
    console.log(this.$refs.child.message)
  }
}
</script>

子组件：

<template>
  <div>
    {{ message }}
  </div>
</template>

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

在这个示例中，父组件中的 mounted 钩子函数访问了子组件中的 message 属性，并打印输出了其值。

以上就是Vue父子组件进行通信的三种方式，分别是 props、事件和 $refs。通过这些方式，可以让组件之间互相传递数据、触发事件、直接访问子组件中的属性和方法。