在Vue 2中,可以使用props和$emit来实现子组件向父组件传值(子传父)和父组件向子组件传值(父传子)。
子传父(子组件向父组件传值)的基本用法如下:
- 在父组件中定义一个属性(prop)来接收子组件传递的值。
- 在子组件中通过$emit方法触发一个自定义事件,并将需要传递的值作为参数传递给该事件。
- 在父组件中监听子组件触发的自定义事件,并在事件处理函数中获取传递的值。
下面是一个示例:
<!-- 父组件 -->
<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
属性,从而实现了子传父。
父传子(父组件向子组件传值)的基本用法如下:
- 在父组件中使用子组件时,通过属性(prop)将需要传递的值传递给子组件。
- 在子组件中通过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 }}
来显示父组件传递的值,从而实现了父传子。