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 >

你可能感兴趣的:(vue前端)