vuex 父组件子组件相互绑定传值，vue 带icon的radioBar

最新推荐文章于 2022-12-08 16:27:43 发布

Qaye

最新推荐文章于 2022-12-08 16:27:43 发布

阅读量667

点赞数

分类专栏： vue前端文章标签： vue vuex 父子组件传值 mint-ui 单选按钮

本文链接：https://blog.csdn.net/fanrenmuchangqian/article/details/79821363

版权

本文介绍了如何在Vue项目中，利用vuex实现父组件和子组件间的数据绑定与传递，特别是在子组件中封装了一个带图标的radioBar。通过监听和触发事件，实现了单选按钮的选择状态同步，同时也更改了其他子组件的SVG图标显示。文章提供了父组件和子组件的关键代码示例，涉及mint-ui的扩展和自定义。

摘要由CSDN通过智能技术生成

需求如下：mint-ui渣渣，单选项默认的mint-cell，没有预留icon slot，所以自己封装个子组件radion-bar，然后父vue定义selectIndex,子组件监听，点击可选定同时通知父组件，从而更改其他子组件的单选svg图，话不多说，贴图：

父组件：

1）template 引用子组件，并注意注入信息，且绑定传值监听函数onChangeRadioBtn:

 
  < 
  radion_bar 
  :radioinfo = 
  'radioInfo[0]' 
  :selectIndex= 
  'selectIndex' 
  @newNodeEvent= 
  "onChangeRadionBtn" 
  ></ 
  radion_bar 
  > 
 
 
  < 
  radion_bar 
  :radioinfo = 
  'radioInfo[1]' 
  :selectIndex= 
  'selectIndex' 
  @newNodeEvent= 
  "onChangeRadionBtn" 
  ></ 
  radion_bar 
  > 
 

2) script data定义单选信息组和默认选择项：

 
  data() { 
 
  return { 
 
  selectIndex: 
  2, 
 
  radioInfo:[ 
 
   { 
 
  icon_label: 
  '#icon-weixin', 
 
  label: 
  '微信支付', 
 
  index: 
  1, 
 
   }