Я читаю о свойствах lwc и наткнулся на заявление.

Компонент, в котором объявлено общедоступное реактивное свойство, не может устанавливать значение свойства, кроме как во время создания компонента. Родитель компонент, который использует компонент в своей разметке, может установить значение публичного свойства компонента. В нашем примере c-todoitem компонент не может обновить значение свойства itemName в файл todoitem.js.

Основываясь на приведенном выше заявлении, я не могу установить общедоступное реактивное свойство (@api), за исключением времени создания компонента. Я знаю, что мы можем использовать геттеры и сеттеры для установки значения, но это требует объявления закрытого реактивного свойства (@track).

В этом контексте, что означает время создания компонента? Есть ли другой способ установить значение общедоступных реактивных свойств в объявленном компоненте без вмешательства частных реактивных свойств?

2
glls 19 Апр 2019 в 05:33

1 ответ

Лучший ответ

Это просто означает, что вам нужно установить значение только в одном из двух мест. Здесь будет продемонстрировано как то, так и другое:

export default class AppName extends LightningElement {
  @api message1 = 'Default message'; // allowed
  @api message2;
  constructor() {
    super(); // must be called, and must be called before using 'this'
    this.message2 = 'New default message'; // also allowed
  }
  onclickhandler() {
    this.message1 = 'Try to change on click...'; // not allowed
  }
}

Обратите внимание, что конструктор всегда называется constructor, в отличие от Java и других языков, где конструктор является именем класса.


После определения его либо встроенным, либо через конструктор, вам больше не разрешено изменять свойство вообще. Он становится доступным только для чтения. Если вы хотите иметь возможность общаться с родительским компонентом, требуется комбинация get/set.

5
sfdcfox 16 Дек 2018 в 03:41
+1 Спасибо за объяснение, я смог протестировать сообщение по умолчанию, однако, когда я пытаюсь протестировать Новое сообщение по умолчанию, Eslint выдает супер ошибка. Несколько способов, которыми я пробовал constructor() {this.message1 = 'New default message'; // also allowed } и @api message2 ;constructor(message2){ this.message2 = 'New default message'; // also allowed }
 – 
codeyinthecloud
16 Дек 2018 в 03:38
1
Я почистил код, чтобы включить правильную демонстрацию, спасибо за предложение.
 – 
sfdcfox
16 Дек 2018 в 03:43
Отлично, super(); делает свое дело. Еще раз спасибо, иногда трудно двигаться вперед по документации, застряв в одном месте! Вы спасли мой день!
 – 
codeyinthecloud
16 Дек 2018 в 03:45
Я уже что-то около 10-12 часов наигрался с этим. Чем больше я узнаю, тем больше я думаю, что мне это понравится.
 – 
sfdcfox
16 Дек 2018 в 03:46
1
Официальные документы обновляются, чтобы уточнить, что вы можете установить только значение по умолчанию для свойства @api. Родительский компонент всегда может переопределить значение.
 – 
Kevin Venkiteswaran
24 Дек 2018 в 09:33