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 }}来显示父组件传递的值，从而实现了父传子。