Vue组件传参

1.props（父传子）
父组件通过属性(prop)的方式向子组件传递参数，子组件可以通过props选项接收父组件传递的参数。例如：

<!-- 父组件 -->
<template>
  <child-component :name="name" :age="age"/>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      name: 'Alice',
      age: 20
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>Name: {
  { name }}</p>
    <p>Age: {
  { age }}</p>
  </div>
</template>

<script>
export default {
  props: {
    name: String,
    age: Number
  }
}
</script>

2.$emit（子传父）
子组件通过$emit方法向父组件传递参数，父组件可以在子组件上监听对应的事件，并获取子组件传递的参数。例如：

<!-- 父组件 -->
<template>
  <div>
    <p>Count: {
  { count }}</p>
    <child-component @add="handleAdd"/>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      count: 0
    }
  },
  methods: {
    handleAdd(n