Vue activa un método en un componente hermano

Requisito: hay dos componentes hermanos en la página. Si hago clic en el botón del componente 1, necesito activar un método en el componente 2;

Aquí, tome la página del carrito de compras como ejemplo: selecciono el estado seleccionado de un determinado producto en la lista de productos y, en el componente de liquidación, determino el estado de todos los seleccionados en función de si hay un estado no seleccionado en la lista.

Efecto:

Paso 1: Introduzca dos componentes hermanos en la página principal

<!-- 商品列表组件 -->
<cartGoodsList></cartGoodsList>
<!-- 结算组件 -->
<carSbumit></carSbumit>

Paso 2: agregue eventos al cuadro de selección de productos en el componente de lista

methods: {
        checkItem(e){//选中/或取消选中某个商品，进而判断全选的状态方法
            
            //实现思路：需要调用结算组件中统计列表是否有未选中状态，从而判断全选的状态
            //1、点击某个商品选中或未选中时，触发一个方法传递到父组件中,并传递当前的选中状态
            //2、在父组件中给结算组件定义ref属性
            //3、在父组件接收在此组件中定义的itemGoodsTypeFn方法
            //4、在itemGoodsTypeFn这个方法中触发兄弟组件ref属性，去触发他里面的方法
            //5、在结算组件中循环列表，判断其中如果有未选中状态的话，直接将状态更改为false，并跳出循环
            this.$emit('itemGoodsTypeFn',e)
        }
    },

Paso 3: reciba el método del componente de lista en la página del componente principal y agregue el atributo de referencia al componente de liquidación

<!-- 购物车列表组件,并传参 -->
<!-- itemGoodsTypeFn方法是子组件传递过来的，要根据这个方法触发兄弟组件carSbumit -->
<cartGoodsList :list="list" @itemGoodsTypeFn="cartListCheckType"></cartGoodsList>
<!-- 结算组件 -->
<carSbumit ref="checkAllType"></carSbumit>

Paso 5: Utilice el método recibido del componente de lista para activar el método en el componente de liquidación

cartListCheckType(e){
//这是列表组件在触发选中或未选中时，向父组件传递的方法，通过这个方法去触发兄弟组件里面的方法
    this.$refs.checkAllType.inspectCheckAll()
}

Paso 6: Determine el estado de selección completo según el estado de selección de producto actual en el componente de liquidación.

<!--全选按钮-->

<van-checkbox v-model="checked" @click="checkedAll">全选</van-checkbox>

computed:{
    ...mapState('cart',['list']),//这是列表的值，我的值存在store中
},
//全选按钮的默认值
data() {
        return {
            checked:false
        };
    },
methods: {
    inspectCheckAll(){//检查商品列表中是否都是选中状态
        let chek = false
        let listArr = this.list
        for(var i=0;i<listArr.length;i++){//循环列表，判断如果有未选中的直接将状态改成false直接跳出循环
                if(!listArr[i].check){
                    chek=false
                    break;
                }else{
                    chek=true
                }
            }
            this.checked=chek//最终赋值状态
        }
},

En este punto, ha terminado de juzgar el estado de todos los seleccionados en función del estado seleccionado actual. Haga clic en Seleccionar todo para seleccionar o deseleccionar la lista. Si no aparece en ella, existen otros métodos más simples. Este es solo uno.

Vue activa un método en un componente hermano

Supongo que te gusta