最新的vue3练习

需要实现的功能是，点击列表（子组件），修改父组件的值，并改子组件变背景颜色。

效果图

这里用三种方法实现，应该还有第四种，第五种。

如果有更好的方式，欢迎大家留言提供。

 页面

最上级页面

父级页面

第一种方法是在元素上直接修改

 for="(item,index) in list2" :listItem=item @selected="item.isSelected=$event.target.checked;item.name='大哥哥'" > 

第二种是在setup里写方法改就如下面的页面

子组件页面

第一种是 直接在元素上自定义方法，这里传了一个事件参数和一个item.name属性

  
  {{listItem.name}}--{{listItem.age}} 

第二种也是在setup里写法，传递参数

页面

刚刚接触vue3，如果发现代码有问题，欢迎大家指出来。

第三种方法

把子组件调用的方法作为属性，然后通过改变属性，去改变值，不知道这样描述对不对。

父组件

子组件