El-radio-group 和 el-radio 怎么关联的,原理是怎样的?

<el-radio-group v-model="radio">
     <el-radio :label="3">备选项</el-radio>
     <el-radio :label="6">备选项</el-radio>
</el-radio-group>

问题:el-raido内容改变后,怎么通知到el-radio-group的?

我需要在一个vue页面里用到这种关系,内部中间夹着了其他的代码,简单代码结构如下:

<div>内容...</div>
<parentCustom>
    <div>内容...</div>
    <childCustom>
        <div>内容...</div>
    </childCustom>
    <div>内容...</div>
    ...
    <childCustom>
        <div>内容...</div>
    </childCustom>
    <div>内容...</div>
</parentCustom>
<div>内容...</div>

在childCustom进行一些处理后,怎么将结果通知到parentCustom里面,在进行其他的业务处理?

可以监听这里的 radio。
如果涉及多个组件的话,可以使用vuex。
至于内部怎么关联的,那是UI库的事情,不用关心。

感谢 [jyk0011]的回复,让我想到了一种方案。

方案:
给父类组件和子类组件关系记录结果到Vuex里面,并且都有唯一的识别标识,通过监听改变做相互通讯。

relation : {
    parent : {
        id : '唯一识别的字符串标识', // 对应parentCustom组件
        taskType : '任务类型',
        taskPrm  : {}, // 任务参数对象
        taskNum  : 0 , // 任务编号,在组件(childCustom)中监听此参数,改变时,子组件做相关任务处理
        children : [
            {
                id : '唯一识别的字符串标识', // 对应childCustom
                backType : '回调类型',
                backPrm  : {}, // 回调参数对象
                backNum  : 0 , // 回调编号,在组件(parentCustom)中监听此参数,改变时,父组件做相关任务处理
            },
            // ...
        ]
    }
}

我想问问是否有其他的方式相互通讯?el-radio-group和el-radio可能不是用vuex做相互通讯的结合部分吧?

搞不懂你要做什么?千万别提我,我怕别人说我把你带偏了。

不知道你的具体需求,监听数据变化用watch;如果是用的成熟的组件,不要想着去改,不如自己写一个

对于需求,抱歉,没有表达清晰:
就是如:El-radio-group 和 el-radio 怎么关联的,我需要的是在自定义组件中,实现相互影响。

需求结构:

<div>内容...</div>
<parentCustom>
    <div>内容...</div>
    <childCustom>
        <div>内容...</div>
    </childCustom>
    <div>内容...</div>
    ...
    <childCustom>
        <div>内容...</div>
    </childCustom>
    <div>内容...</div>
</parentCustom>
<div>内容...</div>

说明如下:
在【组件parentCustom】的“里面”有很多【组件childCustom】,一个对应多个。
相互影响:【组件parentCustom】里面的一些操作会影响【组件childCustom】,【组件childCustom】里面的一些操作会影响【组件parentCustom】。

利用vuex记录一对应多的关系:

relation : {
    '父类识别标识' : {  // 对应 parentCustom
        parent : {
            // 父类配置信息
            init    : 0,
            tkType  : '任务类型',
            tkPrm   : '任务参数',
        },
        child  : {
            '子类识别下标' : { // 对应 childCustom
                // 子类配置信息
                init    : 0,
                bkType  : '回调类型',
                bkPrm   : '回调参数',
            },
        },
    }
}

watch监听:
在【组件parentCustom】监听child的变化,如果有改变(对比init),做相应处理。(【组件childCustom】影响【组件parentCustom】)
在【组件childCustom】监听parent的变化,如果有改变(对比init),做相应处理。(【组件parentCustom】影响【组件childCustom】)

当前项目需要多个页面需要这样的功能,当前方案已经成功应用了,谢谢。

我想知道的是,有没有不借助vuex的方式,parentCustom 和 childCustom 能相互影响?

用组件的props呀。
vue3,props都是proxy的。
所以父组件可以这样

const foo = reactive({
  events: {
    fun1: () => {},
    fun2: () => {}
  }
})

子组件定义props,接收foo

然后可以直接设置(覆盖)


const p = props.events

p.fun1 = () => {
  实现具体的功能
}

这样父组件执行(调用)foo.fun1() ,就会调用子组件的那个函数。

同样道理,可以让子组件直接调用父组件的函数。其实有些UI库的组件就是这么用的。

子组件,不让改props的第一层属性,但是可以改第二层的,所以要加上 events,多加一层。

v-model可以看成是语法糖 v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件
<input v-model='value' type="text"></input> 等同于 <input :value="value" @input="value= $event.target.value"></input>
也可以在组件上自定义model具体可以参考文档

感谢之前的回复。

抱歉,我上面描述有错误:

给父类组件和子类组件关系记录…

注意,【组件parentCustom】 和 【组件childCustom】是slot关系,不是父类和子类组件关系。在【组件parentCustom】的slot中,有多个【组件childCustom】,还有一些不固定的代码。整体布局在同一个vue中。