2025年vue父子组件传值emit（vue父子组件传值的几种方法）

科技前沿 • 2025-05-13 19:14 • 阅读 54

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

在Vue 3中，v-model的父子组件传值方式有所改变。在Vue 2中，v-model是一个语法糖，实际上是通过props和emit来实现父子组件之间的双向绑定。而在Vue 3中，v-model被重新设计为一个指令，它可以直接在子组件上使用。

在Vue 3中，父组件通过v-model指令将数据传递给子组件，并且可以监听子组件的值变化。子组件通过$emit方法触发一个名为"update:modelValue"的自定义事件来更新父组件的值。

讯享网

下面是一个简单的示例，演示了如何在Vue 3中使用v-model进行父子组件传值：

父组件：

&lt;template&gt; &lt;div&gt; &lt;ChildComponent v-model=&quot;value&quot; /&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; import ChildComponent from &#39;https://blog.csdn.net/sxs7970/article/details/ChildComponent.<em>vue</em>&#39;; export default { components: { ChildComponent }, data() { return { value: &#39;&#39; }; } }; &lt;/script&gt;

讯享网

子组件：

讯享网&lt;template&gt; &lt;div&gt; &lt;input :value=&quot;modelValue&quot; @input=&quot;$e<em>mit</em>(&#39;update:modelValue&#39;, $event.target.value)&quot; /&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { props: { modelValue: { type: String, required: true } } }; &lt;/script&gt;

在父组件中，我们使用v-model指令将value属性传递给子组件。在子组件中，我们使用:value绑定modelValue属性，并通过@input事件触发"update:modelValue"事件来更新父组件的值。

这样，当子组件中的输入框的值发生变化时，父组件的value属性也会相应地更新。

2025年vue父子组件传值emit（vue父子组件传值的几种方法）

相关推荐