Pass data between two components in web component

Question

How to pass data between two components in a web component?

I can't pass the selectedIndex from the parent select to the child component (converter-input) And then show the desired array according to selectedIndex...

index.html

...
    <div>
        <form name="property_form">
            <span>
                <select class="select-property form-control" name="the_menu">
                </select>
            </span>
        </form>
    </div> 
    <div>
        <div class="converter-side-a">
            <converter-input></converter-input>
        </div>

        <div class="converter-equals">
            <p>=</p>
        </div>

        <div class="onverter-side-b">
            <converter-input></converter-input>
        </div>
    </div> 
...

index.js

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

function selectUnit(i){
    selsectedConverterArr = mainOb[i].unit;
    console.log(selsectedConverterArr);
}
...