Vue2-子传父和父传子的基本用法

在Vue 2中，可以使用props和$emit来实现子组件向父组件传值（子传父）和父组件向子组件传值（父传子）。

子传父（子组件向父组件传值）的基本用法如下：

1. 在父组件中定义一个属性（prop）来接收子组件传递的值。
2. 在子组件中通过$emit方法触发一个自定义事件，并将需要传递的值作为参数传递给该事件。
3. 在父组件中监听子组件触发的自定义事件，并在事件处理函数中获取传递的值。

下面是一个示例：

<!-- 父组件 -->
<template>
  <div>
    <h2>父组件</h2>
    <p>子组件传递的值：{{ messageFromChild }}</p>
    <child-component @child-event="handleChildEvent"></child-component>
  </div>
</template>

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

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

<!-- 子组件 -->
<template>
  <div>
    <h3>子组件</h3>
    <button @click="sendMessageToParent">向父组件传递消息</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessageToParent() {
      const message = 'Hello, parent!';
      this.$emit('child-event', message);
    }
  }
};
</script>

在上述示例中，子组件通过点击按钮触发sendMessageToParent方法，该方法通过$emit触发了名为child-event的自定义事件，并将消息作为参数传递给父组件。父组件通过监听child-event事件，在handleChildEvent方法中获取到子组件传递的值，并将其赋值给messageFromChild属性，从而实现了子传父。

父传子（父组件向子组件传值）的基本用法如下：

1. 在父组件中使用子组件时，通过属性（prop）将需要传递的值传递给子组件。
2. 在子组件中通过props选项接收父组件传递的值，并在模板中使用。

下面是一个示例：

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

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      messageFromParent: 'Hello, child!'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <h3>子组件</h3>
    <p>父组件传递的值：{{ message }}</p>
  </div>
</template>

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

在上述示例中，父组件通过:message="messageFromParent"将messageFromParent的值传递给子组件的message属性。子组件通过props选项声明了message属性，并在模板中使用{{ message }}来显示父组件传递的值，从而实现了父传子。