2025年vue2父子组件传值props（vue父子组件如何传递参数）

科技前沿 • 2025-05-21 13:41 • 阅读 44

大家好，我是讯享网，很高兴认识大家。

Vue中父子组件之间传递信息可以通过props和$emit事件来实现。

父组件向子组件传递信息：

在父组件中通过props将数据传递给子组件，子组件通过props接收数据即可。

父组件：

&lt;template&gt; &lt;div&gt; &lt;child-component :message=&quot;message&quot;&gt;&lt;/child-component&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; import ChildComponent from &#39;https://blog.csdn.net/weixin_/article/details/ChildComponent.<em>vue</em>&#39; export default { components: { ChildComponent }, data() { return { message: &#39;Hello, child component!&#39; } } } &lt;/script&gt;

讯享网

子组件：

讯享网&lt;template&gt; &lt;div&gt; {{ message }} &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { <em>pro</em><em>ps</em>: { message: String } } &lt;/script&gt;

子组件向父组件传递信息：

在子组件中通过$emit事件触发父组件的方法，将需要传递的数据作为参数传递即可。

子组件：

&lt;template&gt; &lt;div&gt; &lt;button @click=&quot;sendMessage&quot;&gt;Send message to parent&lt;/button&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { methods: { sendMessage() { this.$emit(&#39;send-message&#39;, &#39;Hello, parent component!&#39;) } } } &lt;/script&gt;

父组件：

讯享网&lt;template&gt; &lt;div&gt; &lt;child-component @send-message=&quot;receiveMessage&quot;&gt;&lt;/child-component&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; import ChildComponent from &#39;https://blog.csdn.net/weixin_/article/details/ChildComponent.<em>vue</em>&#39; export default { components: { ChildComponent }, methods: { receiveMessage(message) { console.log(message) } } } &lt;/script&gt;

在子组件中通过$emit触发了send-message事件，父组件通过@send-message监听到事件，并且将传递的数据作为参数传递给了receiveMessage方法。

2025年vue2父子组件传值props（vue父子组件如何传递参数）

相关推荐