From a parent component JS file how do i change an attribute of its child component

Question

I have an Aura parent component and an LWC child component. In the parent component helper I'd like to change an @api attribute of the child component.

I know how to find the child component using its aura:id.

My current solution is to bind the child component's attribute to an aura:attribute of the parent and then change the aura:attribute of the parent in the parent's helper. This works fine. However, I'd like to know how to change the child's attribute directly.

childComponent.setAttribute has not worked.

Answer 1

The child LWC is still exposed as a SecureComponent, so the solution is to simply call the SecureComponent#set method:

// helloWorldMsg.js
import { LightningElement, api } from 'lwc';

export default class HelloWorldMsg extends LightningElement {
    @api message;
}

<!-- helloWorldMsg.html -->
<template>
{message}
</template>

<!-- helloWorldMsgApp.app -->
<aura:application >
    <lightning:button label="Say Hello" onclick="{!c.click}" />
    <hr />
    <c:helloWorldMsg aura:id="hello" />

</aura:application>

({
    click: function(component, event, helper) {
        let hello = component.find("hello");
        hello.set("v.message", "Hello World!");
    }
})

Note the use of the value provider v to set the attribute.