2025年vue父子组件传值props（vue父子组件传值不能实时更新的解决方法）

科技前沿 • 2025-04-20 23:40 • 阅读 41

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

在Vue中，子组件是无法直接修改父组件传递的值的。这是因为Vue遵循了单向数据流的原则，父组件向子组件传递的数据是只读的，子组件无法修改它们。

但是，如果需要修改父组件的数据，可以通过触发一个事件来实现。具体的步骤如下：

在父组件中定义一个数据属性，并将它作为 prop 传递给子组件。
在子组件中，使用 props 接收这个属性，并在需要修改时，触发一个自定义事件。
在父组件中监听子组件触发的事件，并在事件处理程序中修改父组件的数据。

下面是一个示例：

// <em>父</em><em>组件</em> &lt;template&gt; &lt;div&gt; &lt;p&gt;<em>父</em><em>组件</em>的值：{{ parentValue }}&lt;/p&gt; &lt;child-component :childValue=&quot;parentValue&quot; @updateParentValue=&quot;updateParentValue&quot;&gt;&lt;/child-component&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; import ChildComponent from &#39;https://blog.csdn.net/baidu_/article/details/ChildComponent.<em>vue</em>&#39;; export default { components: { ChildComponent }, data() { return { parentValue: &#39;初始值&#39; }; }, methods: { updateParentValue(value) { this.parentValue = value; } } }; &lt;/script&gt; // 子<em>组件</em> &lt;template&gt; &lt;div&gt; &lt;p&gt;子<em>组件</em>的值：{{ childValue }}&lt;/p&gt; &lt;button @click=&quot;updateParentValue&quot;&gt;<em>修改</em><em>父</em><em>组件</em>的值&lt;/button&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { <em>pro</em><em>ps</em>: [&#39;childValue&#39;], methods: { updateParentValue() { // 触发自定义事件，将新的值传递给<em>父</em><em>组件</em> this.$emit(&#39;updateParentValue&#39;, &#39;新的值&#39;); } } }; &lt;/script&gt;

讯享网

在上面的示例中，父组件通过 prop 将 parentValue 传递给子组件。子组件通过点击按钮触发 updateParentValue 方法，并将新的值通过自定义事件 updateParentValue 传递给父组件。父组件监听该事件，然后在事件处理程序中更新 parentValue 的值。这样就实现了子组件修改父组件传递的值的效果。

2025年vue父子组件传值props（vue父子组件传值不能实时更新的解决方法）

相关推荐