Vue3组件间传值的坑有哪些及怎么解决

这篇文章主要讲解了“Vue3组件间传值的坑有哪些及怎么解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue3组件间传值的坑有哪些及怎么解决”吧！

为光泽等地区用户提供了全套网页设计制作服务，及光泽网站建设行业解决方案。主营业务为网站设计制作、成都网站设计、光泽网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

实例填坑

坑一

1. 发现天坑

我们通过一个计数器组件来演示这个坑，当想对父组件传递过来的值做操作时，发现操作无效，先看代码：

在上面的代码中，我们定义了一个counter组件接收父组件的一个count值，当点击这个显示的值时，我们做加一操作。这时候我们运行代码会发现，我们的值并不会完成加一操作，而是会报父组件传递过来的值是只读的：

Vue3组件间传值的坑有哪些及怎么解决

2. 填坑时刻

那假如我们要完成这个加一的功能怎么办呢？答案就是我们复制一份父组件传递过来的值，对我们自己的值进行操作：

当我们定义一个单词名称比较长的属性，并且用“-”分隔符连接的时候，子组件无法接收到正确的值，显示NaN。代码如下：

组件间传值

Vue3组件间传值的坑有哪些及怎么解决

实例填坑

坑一

1. 发现天坑

2. 填坑时刻

坑2:

1.发现天坑

2.填坑时刻

其他资讯