Как передать объект и функции js в веб-компонент

Question

Привет всем Я новичок в javaScript и в настоящее время изучаю веб-компонент JS, и я застрял из-за некоторых случаев использования

1) Я хочу передать объект JS в свой компонент, например

<my-component data=obj ></my-component> 

И требуется использовать внутри моего кода компонента Как

connectedCallback () {
    console.log(this.data) // it should print {"name":"xyz" , "role" : "dev"}
} 

2) Мне также нужно передать некоторые функции или, возможно, вызвать функции обратного вызова, например.

function myFunction(e){
   console.log(e)
}

<my-component click=myFunction ></my-component>

, пожалуйста, попробуйтедобавить фрагмент кода также в ANS, что поможет мне узнать больше JS.Спасибо

Answer 1

Вы должны передать большой объект Javascript.

С помощью метода произвольного элемента:

let comp = document.querySelector( 'my-component' )
comp.myMethod( obj )

Или установить свойство:

comp.data = obj

Answer 2

Лучше всего передавать сложные данные, используя свойство, а не атрибут.

myEl.data = {a:1,b:'two'};

Стандартные on события прекрасно работают для пользовательского элемента:

function myFunction(e){
  alert(JSON.stringify(e.target.data));
  e.target.data = {a:1,b:"two"};
}

class MyComponent extends HTMLElement {
  constructor() {
    super();
    this._data = 0;
    this.attachShadow({mode:'open'}).innerHTML="Click Me";
  }

  static get observedAttributes() {
    return ['data'];
  }

  attributeChangedCallback(attrName, oldVal, newVal) {
    if (oldVal !== newVal) {

    }
  }

  get data() {
    return this._data;
  }
  set data(newVal) {
    this._data = newVal;
  }
}

customElements.define('my-component', MyComponent);

<my-component onclick="myFunction(event)"></my-component>

Если ваш компонент отправляет пользовательское событие, тогда лучше всего получить к нему доступ через код:

function specialEventHandler(evt) {
  // do something
}

myEl.addEventListener('special-event;', specialEventHandler);

Answer 3

Объявление 1) Вам нужно использовать JSON.stringify(obj) Объявление 2) Насколько я знаю, все атрибуты должны быть определены как строки. Вы можете передать функцию, которая является глобальной, и внутри компонента попытаться eval(fn)