vue 父组件 子组件

Vue中的组件通信有多种方式，其中包括父组件向子组件传递数据和子组件向父组件触发事件。

1. 父组件向子组件传递数据：
在父组件中使用子组件时，可以通过在子组件标签上使用属性来传递数据。在子组件中，可以通过`props`来接收和使用这些数据。示例代码如下：

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="parentMsg"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMsg: 'Hello from parent component!'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

在上面的示例中，父组件通过属性`:message`将数据传递给子组件，并在子组件中通过`props`接收并显示该数据。

2. 子组件向父组件触发事件：
在子组件中，可以通过`$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>
  <div>
    <button @click="triggerEvent">触发事件</button>
  </div>
</template>

<script>
export default {
  methods: {
    triggerEvent() {
      this.$emit('child-event', 'Hello from child component!'); // 触发自定义事件，并传递数据给父组件
    }
  }
}
</script>

在上面的示例中，子组件通过`$emit`方法触发名为`child-event`的自定义事件，并传递数据给父组件。父组件通过监听`child-event`事件并在相应的方法中处理子组件传递的数据。

以上就是Vue中父组件和子组件之间的数据传递和事件触发的简单示例。在实际开发中，还可以使用Vuex、Event Bus等工具来实现更复杂的组件通信需求。