vue传值 父子组件如何通讯

在Vue中，父组件向子组件传递数据可以通过props属性实现，而子组件向父组件传递数据可以通过自定义事件实现。具体的实现方法如下：

1. 父组件向子组件传递数据：

在父组件中，可以使用props属性将数据传递给子组件。例如：

<template>
  <div>
    <child-component :propName="parentData"></child-component>
  </div>
</template>

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

export default {
  data() {
    return {
      parentData: '这是父组件传递的数据'
    }
  },
  components: {
    ChildComponent
  }
}
</script>

在子组件中，可以通过props属性接收父组件传递的数据。例如：

<template>
  <div>
    {{ propName }}
  </div>
</template>

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

2. 子组件向父组件传递数据：

在子组件中，可以使用$emit方法触发一个自定义事件，并且将需要传递的数据作为参数传递到该事件中。例如：

<template>
  <div>
    <button @click="handleClick">点击传递数据到父组件</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('child-event', '这是子组件传递的数据')
    }
  }
}
</script>

在父组件中，可以通过v-on指令监听子组件触发的自定义事件，并且在事件处理函数中获取子组件传递的数据。例如：

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

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

export default {
  data() {
    return {
      parentData: ''
    }
  },
  components: {
    ChildComponent
  },
  methods: {
    handleChildEvent(data) {
      this.parentData = data
    }
  }
}
</script>

这样，当子组件中的按钮被点击时，就会触发一个名为child-event的自定义事件，并且将子组件传递的数据作为参数传递给该事件。在父组件中，我们通过v-on指令监听该事件，并且在事件处理函数中获取子组件传递的数据，从而完成了子组件向父组件传递数据的过程。