如何将 js 对象和函数传递给 Web 组件答案

【问题标题】：How to pass js Object and functions to a web component如何将 js 对象和函数传递给 Web 组件
【发布时间】：2019-04-02 06:49:07
【问题描述】：

大家好，我是 javaScript 的初学者，目前正在探索 JS Web 组件，但由于一些用例而陷入困境

1 ) 我想将一个 JS 对象传递给我的组件，例如

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

并要求在我的组件代码中使用 Like

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中添加代码sn-p，这将有助于我学习更多JS。谢谢

【问题讨论】：

标签： javascript custom-controls web-component custom-element

【解决方案1】：

你应该通过 Javascript 传递大对象。

通过自定义元素方法：

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

或者设置一个属性：

comp.data = obj

【讨论】：

对于功能来说，也是一样的。如果您使用 LitHTML，则有一种特殊的语法可以通过属性 <my-comp .things=${myObj}>... 传递对象，但使用 JavaScript 方式是可行的方法

【解决方案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);

&lt;my-component onclick="myFunction(event)"&gt;&lt;/my-component&gt;

如果您的组件调度自定义事件，那么最好通过代码访问它：

function specialEventHandler(evt) {
  // do something
}

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

【讨论】：

【解决方案3】：

我和 Andreas Galster 一起上了 Udemy 课程，导师通过属性传入了 JSON 对象。

如您所见，它还需要 encodeURIComponent 和 decodeURIComponent

attributeChangedCallback (name, oldValue, newValue) {
        if (newValue && name === 'profile-data') {
            this.profileData = JSON.parse(decodeURIComponent(newValue));
            this.removeAttribute('profile-data');
        }

        this.render();
    }

输入：

<profile-card profile-data=${encodeURIComponent(JSON.stringify(profile))}>

</profile-card>

希望这会有所帮助。代码对我来说很好用。

【讨论】：

【解决方案4】：

广告 1) 您需要使用JSON.stringify(obj) 广告 2）据我所知，所有属性都需要定义为字符串。您可以将全局和内部组件尝试传递给eval(fn)

【讨论】：

嗨，谢谢你的回答 1) JSON.stringify(obj) 我试过了，但它没有给我完整的数据，属性长度可能有一些限制 2) eval(fun) 也不起作用由于组件在 shadow dom 中而不是在实际 dom 中呈现，因此范围问题