Vue.js中如何使用父子组件通信？

在Vue.js中，父组件和子组件之间的通信可以通过props和事件两种方式来实现。

props：父组件可以通过props向子组件传递数据，子组件可以通过this.$props访问到传递过来的属性。例如：

// 父组件模板
<template>
  <child-component :title="myTitle"></child-component>
</template>

// 子组件模板
<template>
  <div>
    <h1>{{ title }}</h1>
    ...
  </div>
</template>

// 子组件脚本
export default {
  props: {
    title: String
  }
  ...
}

在上面的代码中，父组件通过props向子组件传递了一个名为“title”的属性，并将该属性的值绑定到了myTitle变量。子组件中定义了一个名为“title”的props，并将该属性的值绑定到了模板中的h1标签上。

事件：子组件可以通过$emit方法触发一个事件，并向父组件传递数据。父组件可以通过v-on指令来监听子组件的事件，并在回调函数中获取子组件传递过来的数据。例如：

// 子组件模板
<template>
  <div>
    ...
    <button @click="onClick">Click me!</button>
  </div>
</template>

// 子组件脚本
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    onClick() {
      this.count++;
      this.$emit('increment', this.count);
    }
  }
}

// 父组件模板
<template>
  <child-component @increment="onIncrement"></child-component>
</template>

// 父组件脚本
export default {
  methods: {
    onIncrement(count) {
      console.log(count);
    }
  }
  ...
}

在上面的代码中，子组件定义了一个名为“increment”的事件，并在点击按钮时触发该事件并传递一个count参数。父组件通过v-on指令监听子组件的increment事件，并在回调函数中获取count参数并输出到控制台中。