Web Component中父子组件间如何传递数据？

你的核心问题是拿到select的selectedIndex并获取目标数组后，没有将数据传递给<converter-input>子组件，以下是具体的修复步骤：

1. 修改index.js，传递数据给子组件 #

先获取页面上的两个<converter-input>实例，在selectUnit函数中将选中的数组传递给它们，这里用自定义属性的方式实现：

// 获取页面上所有converter-input元素
const converterInputs = document.querySelectorAll('converter-input');

if(mainForm){
    mainForm.addEventListener('change' , () =>{
        let i = mainForm.selectedIndex;
        selectUnit(i);
    })
}

function selectUnit(i){
    // 修正原代码拼写错误：selsected -> selected
    const selectedConverterArr = mainOb[i].unit;
    console.log(selectedConverterArr);
    
    // 将选中的数组传递给每个converter-input子组件
    converterInputs.forEach(input => {
        // 用dataset传递数组，需转为JSON字符串
        input.dataset.units = JSON.stringify(selectedConverterArr);
    });
}

2. 实现converter-input子组件的更新逻辑 #

你的<converter-input>是自定义元素，需要在它的类定义里监听属性变化，根据传入的数组更新显示内容：

class ConverterInput extends HTMLElement {
    constructor() {
        super();
        // 初始化元素结构
    }

    // 声明需要监听的属性
    static get observedAttributes() {
        return ['data-units'];
    }

    // 属性变化时触发的回调
    attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'data-units' && newValue) {
            const units = JSON.parse(newValue);
            this.renderUnits(units);
        }
    }

    // 根据传入的数组渲染内容（示例为生成select选项）
    renderUnits(units) {
        this.innerHTML = `
            <select class="unit-select form-control">
                ${units.map(unit => `<option value="${unit.value}">${unit.label}</option>`).join('')}
            </select>
        `;
    }
}

// 注册自定义元素
customElements.define('converter-input', ConverterInput);

可选方案：用自定义事件传递数据 #

如果不想用属性传递，也可以通过自定义事件实现：

// 在selectUnit函数中触发事件
function selectUnit(i){
    const selectedConverterArr = mainOb[i].unit;
    const updateEvent = new CustomEvent('units-updated', { detail: selectedConverterArr });
    converterInputs.forEach(input => input.dispatchEvent(updateEvent));
}

// 在converter-input类中监听事件
class ConverterInput extends HTMLElement {
    constructor() {
        super();
        this.addEventListener('units-updated', (e) => {
            this.renderUnits(e.detail);
        });
    }

    renderUnits(units) {
        // 渲染逻辑同上
    }
}

内容的提问来源于stack exchange，提问作者fatemeh garshasbi