Varias formas de comunicación de componentes - M

Varias formas de comunicación de componentes.

Pasar valor del componente principal al componente secundario

En el componente principal, el componente personalizado se usa para pasar el valor y el atributo personalizado se escribe en la etiqueta donde el componente principal llama al componente secundario. Use accesorios en el subcomponente para recibir, los accesorios se escriben en el subcomponente al mismo nivel que los datos, los accesorios son una matriz y el contenido es el nombre del atributo personalizado.

Pasar valores de componentes secundarios a componentes principales

El componente secundario pasa el valor al componente principal mediante el modo de suscriptor de publicación. En el componente secundario, utilice this.$emit para publicar un evento personalizado y recibir dos parámetros. El primer parámetro es el nombre del evento personalizado y el segundo El parámetro es el valor a pasar. Use @custom event name = "función de devolución de llamada" en la etiqueta del componente principal que llama al componente secundario, y se pasan varios datos en la función de devolución de llamada, y se usan varios parámetros para recibirlos.

vuex (detallado en la siguiente parte)

El componente principal llama al método en el componente secundario

Método 1:
en la etiqueta del componente principal que llama al componente secundario, llame directamente al método en el componente secundario a través de ref, ref es igual a una variable como childChange, y use this.$refs.childChange. componente en el método del componente principal para lograr.

//父组件中
<template>
    <div>
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="childChange"/>
    </div>
</template>    
 
<script>
import Child from './child';
 
export default {
    
    
    methods: {
    
    
        handleClick() {
    
    
              this.$refs.childChange.sing();
        },
    },
}
</script>
 
 
//子组件中
<template>
  <div>我是子组件</div>
</template>
<script>
export default {
    
    
  methods: {
    
    
    sing() {
    
    
      console.log('子组件的方法');
    },
  },
};
</script>

Método 2:
a través del componente $emit,$ sobre el método para lograr

//父组件中
<template>
    <div>
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="child"/>
    </div>
</template>    
<script>
import Child from './child';
export default {
    
    
    methods: {
    
    
        handleClick() {
    
    
            this.$refs.child.$emit("childmethod") //子组件$on中的名字
        },
    },
}
</script>
 
//子组件中
<template>
    <div>我是子组件</div>
</template>
<script>
export default {
    
    
    mounted() {
    
    
        this.$nextTick(function() {
    
    
            this.$on('childmethods', function() {
    
    
                console.log('子组件的方法');
            });
        });
     },
};
</script>

El componente hijo llama al método del componente padre

Método 1:
Llame al método del componente principal directamente en el componente secundario a través de this.$parent.event

//父组件中
<template>
    <div>
        <Child></Child>
    </div>
</template>    
<script>
import Child from './child';
export default {
    
    
    methods: {
    
    
        fatherMethod() {
    
    
            console.log('父组件中的方法');
        },
    },
}
</script>
 
//子组件中
<template>
    <div>
		<Button @click="childMethod">子组件调用父组件中的方法</Button>
	</div>
</template>
<script>
export default {
    
    
    mounted() {
    
    
        childMethod() {
    
    
          this.$parent.fatherMethod();
        }
     },
};
</script>

Método 2:
use $emit en el componente secundario para desencadenar un evento en el componente principal, y el componente principal solo escuchará este evento.

//父组件中
<template>
    <div>
        <Child @fatherMethod="fatherMethod"></Child>
    </div>
</template>    
<script>
import Child from './child';
export default {
    
    
    methods: {
    
    
        fatherMethod() {
    
    
            console.log('父组件中的方法');
        },
    },
}
</script>
 
//子组件中
<template>
    <div>
		<Button @click="childMethod">子组件调用父组件中的方法</Button>
	</div>
</template>
<script>
export default {
    
    
    mounted() {
    
    
        childMethod() {
    
    
          this.$emit('fatherMethod');
        }
     },
};
</script>

Método 3:
el componente principal pasa el método al componente secundario y llama a este método directamente en el componente secundario

//父组件中
<template>
    <div>
        <Child @fatherMethod="fatherMethod"></Child>
    </div>
</template>    
<script>
import Child from './child';
export default {
    
    
    methods: {
    
    
        fatherMethod() {
    
    
            console.log('父组件中的方法');
        },
    },
}
</script>
 
//子组件中
<template>
    <div>
		<Button @click="childMethod">子组件调用父组件中的方法</Button>
	</div>
</template>
<script>
export default {
    
    
    props: {
    
    
      fatherMethod: {
    
    
        type: Function,
        default: null
      }
    },
    mounted() {
    
    
        childMethod() {
    
    
          if (this.fatherMethod) {
    
    
	          this.fatherMethod();
	      }
        }
     },
};
</script>