[JavaScript知识库]2021-08-29 lightning web @api: Marks a field as public

The app component uses the following HTML.

<!-- app.html -->
<template>
<div>
    <c-bike bike={bike}></c-bike>
</div>
</template>

The app component uses the following JavaScript.

// app.js
import { LightningElement } from 'lwc';
export default class App extends LightningElement {
    bike = {
        name: 'Electra X4',
        picture: 'https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/electrax4.jpg'
    };
}

The bike component uses the following HTML.

<!-- bike.html -->
<template>
    <img src={bike.picture} alt="bike picture" />
    <p>{bike.name}</p>
</template>

?The bike component uses the following JavaScript.

// bike.js
import { LightningElement, api } from 'lwc';
export default class Bike extends LightningElement {
    @api bike;
}

apiLwc.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
   <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

1. <isExposed>true</isExposed>? --> 说明该lightning web组件可以在页面中显示出来。如果是false的话，在页面中是不显示的。具体在哪个页面中显示要在targers中设置。
2. <target>lightning__HomePage</target> --> 说明该lightning web组件可以在HomePage中显示。
3. *如果在页面中已经设置，比如说<target>lightning__HomePage</target>已经设置并且在页面中进行过拖拽显示后。在把<target>lightning__HomePage</target>取消的话，会报错，因为这时候页面中引用了这个组件。删除页面中该组件后，可以更改设置。

最终显示效果：

?

?