vu e2父子组件通信方式

Vue2中父子组件通信可以通过props和$emit方法来实现。

1. 父组件向子组件传递数据：使用props将数据传递给子组件。

父组件模板中：

<template>
  <child-component :prop-name="propValue"></child-component>
</template>

子组件中使用props接收数据：

<script>
  export default {
    props: {
      propName: {
        type: String,
        default: ''
      }
    }
  }
</script>

2. 子组件向父组件传递数据：使用$emit方法触发父组件的自定义事件。

子组件中使用$emit方法触发自定义事件：

<script>
  export default {
    methods: {
      emitEvent() {
        this.$emit('custom-event', data)
      }
    }
  }
</script>

父组件中监听自定义事件：

<template>
  <child-component @custom-event="handleEvent"></child-component>
</template>

<script>
  export default {
    methods: {
      handleEvent(data) {
        // 处理传递过来的数据
      }
    }
  }
</script>

通过以上两种方式，可以实现父子组件之间的通信。