SF-PD2 User Interface Practice Question

Answer analysis

Option-by-option breakdown

For each option: why learners choose it and why it is or isn't the right answer here.

• ✗

  this.dispatchEvent(new CustomEvent('refreshData'));

  Why it's wrong here

  Dispatching a CustomEvent from the parent sends information upward or across the DOM; it does not invoke a method on a child element. The child would need a listener to respond, which defeats the purpose of calling a public method. This pattern is for child-to-parent communication, not parent-to-child method invocation.

• ✗

  this.template.querySelector('c-child').call('refreshData');

  Why it's wrong here

  There is no call() method on a Lightning Web Component element. The aura framework used cmp.get('c.refreshData') style invocation, but Lightning Web Components expose @api methods as plain JavaScript methods on the element. Attempting to call a nonexistent call() function throws a TypeError at runtime in this scenario.

• ✓

  this.template.querySelector('c-child').refreshData();

  Why this is correct

  A template reference obtained with querySelector returns the child custom element, and public methods decorated with @api are exposed directly on that element instance. Calling refreshData() on it invokes the child's public method. This is the documented pattern for parent-to-child imperative communication in Lightning Web Components when no reactive property change is involved.

• ✗

  this.template.querySelector('c-child').refreshData;

  Why it's wrong here

  Referencing the method without parentheses retrieves the function object but never executes it. The child's refresh logic would not run, and the parent would silently do nothing. Parent-to-child imperative calls require the parentheses to actually invoke the public method exposed via the @api decorator.