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

需求如下：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,

},

{

icon_label: '#icon-zhifubao',

label: '支付宝支付',

index: 2,

}

]

};

},

3，method中定义监听函数：

methods: {

onChangeRadionBtn( index){

this. selectIndex = index;

}

},

子组件：不详细解释没直接贴全部vue代码，注意：

1）watch监听自己的index和父Index

2）引用了部分ICONFONT 的svg图标，请注意。

< template >

< section class= "radioPart" @click=" cgStatus()" >

< svg class= "icon_title" aria-hidden= "true" slot= "icon" >

< use :xlink:href= 'radioinfo.icon_label' > use >

svg >

< span > {{ radioinfo. label}} span >

< svg class= "icon_select" aria-hidden= "true" slot= "icon" >

< use :xlink:href = " MyselectIndex == radioinfo.index ? '#icon-ico1' : '#icon-ico2' " > use >

svg >

section >

template >

< script >

export default {

name: 'radion_bar',

props: [ "radioinfo", "selectIndex"],

data() {

return {

MyselectIndex: this. selectIndex,

};

},

watch: {

selectIndex( index){

// console.log('selectIndex cg :' +index );

this. MyselectIndex = index;

},

MyselectIndex( index){

// console.log('MyselectIndex cg :' +index );

this. $emit( 'newNodeEvent', index)

}

},

methods: {

cgStatus(){

if( this. MyselectIndex == this. radioinfo. index){

return;

}

this. MyselectIndex = this. radioinfo. index;

}

},

}

script >

< style lang= "scss" scoped >

.radioPart{

font-size: .7rem;

margin: .02rem;

width: 100%;

.icon_title {

width: 1.5rem;

height: 1.5rem;

fill: currentColor;

overflow: hidden;

margin: .5rem;

}

span{

vertical-align: 1.2em;

}

.icon_select {

position: absolute;

width: 1.5rem;

height: 1rem;

margin-top: .8rem;

right: .5rem;

// vertical-align: .7em;

fill: currentColor;

overflow: hidden;

}

}

style >