在 Web Components 中，我们可以使用 prop 传递数据和事件监听来实现组件之间的通信。这种通信方式可以让我们更方便地组合和复用组件，提高开发效率和代码质量。本文将详细介绍 Web Components 中的 prop 传递和事件监听，以及如何在实际项目中应用它们。
prop 传递
在 Web Components 中，prop 是指组件的属性。我们可以通过给组件添加属性来传递数据。组件可以通过监听属性变化事件来获取传递过来的数据。下面是一个简单的示例：
// javascriptcn.com 代码示例
<!-- 定义一个名为 my-component 的组件 -->
<template id="my-component">
<div>Hello, <span id="name"></span>!</div>
</template>
<!-- 在页面中使用 my-component 组件，并传递 name 属性 -->
<my-component name="World"></my-component>
<script>
class MyComponent extends HTMLElement {
constructor() {
super();
const template = document.getElementById('my-component');
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.appendChild(template.content.cloneNode(true));
}
static get observedAttributes() {
return ['name'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'name' && oldValue !== newValue) {
this.shadowRoot.getElementById('name').textContent = newValue;
}
}
}
customElements.define('my-component', MyComponent);
</script>在上面的示例中，我们定义了一个名为 my-component 的组件，并传递了一个 name 属性。在组件的构造函数中，我们创建了一个 Shadow DOM，并将组件模板插入到其中。在组件的 observedAttributes 静态属性中，我们指定了要监听的属性名。在组件的 attributeChangedCallback 方法中，我们可以获取到传递过来的属性值，并将其渲染到组件中。
事件监听
除了 prop 传递，我们还可以使用事件监听来实现组件之间的通信。在 Web Components 中，我们可以使用 CustomEvent 来定义和触发自定义事件。下面是一个简单的示例：
// javascriptcn.com 代码示例
<!-- 定义一个名为 my-button 的组件 -->
<template id="my-button">
<button id="btn">Click me</button>
</template>
<!-- 在页面中使用 my-button 组件 -->
<my-button></my-button>
<script>
class MyButton extends HTMLElement {
constructor() {
super();
const template = document.getElementById('my-button');
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.appendChild(template.content.cloneNode(true));
this.shadowRoot.getElementById('btn').addEventListener('click', () => {
this.dispatchEvent(new CustomEvent('my-click', {
bubbles: true,
composed: true,
detail: {
message: 'Hello, World!'
}
}));
});
}
}
customElements.define('my-button', MyButton);
</script>在上面的示例中，我们定义了一个名为 my-button 的组件，并在其中添加了一个按钮。在按钮的 click 事件处理函数中，我们创建了一个 CustomEvent，并触发了一个名为 my-click 的自定义事件。在触发事件时，我们可以通过 detail 属性来传递一些额外的数据。
在使用 my-button 组件的页面中，我们可以通过监听 my-click 事件来获取传递过来的数据。下面是一个示例：
<my-button></my-button>
<script>
const myButton = document.querySelector('my-button');
myButton.addEventListener('my-click', (event) => {
console.log(event.detail.message); // 输出 "Hello, World!"
});
</script>在上面的示例中，我们获取了 my-button 组件，并监听了它的 my-click 事件。在事件处理函数中，我们可以通过 event.detail 属性来获取传递过来的数据。
应用实例
Web Components 中的 prop 传递和事件监听可以让我们更方便地组合和复用组件，提高开发效率和代码质量。下面是一个应用实例，展示了如何使用这种通信方式来实现一个带有筛选功能的数据表格组件。
// javascriptcn.com 代码示例
<!-- 定义一个名为 my-table 的组件 -->
<template id="my-table">
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<th><input id="name-filter" type="text" placeholder="Filter by Name"></th>
<th><input id="age-filter" type="number" placeholder="Filter by Age"></th>
</tr>
</thead>
<tbody id="tbody"></tbody>
</table>
</template>
<!-- 在页面中使用 my-table 组件，并传递 data 属性 -->
<my-table data='[{"name":"Alice","age":20},{"name":"Bob","age":30},{"name":"Charlie","age":40}]'></my-table>
<script>
class MyTable extends HTMLElement {
constructor() {
super();
const template = document.getElementById('my-table');
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.appendChild(template.content.cloneNode(true));
this._data = [];
this._render();
this.shadowRoot.getElementById('name-filter').addEventListener('input', (event) => {
this._filterByName(event.target.value);
});
this.shadowRoot.getElementById('age-filter').addEventListener('input', (event) => {
this._filterByAge(event.target.value);
});
}
static get observedAttributes() {
return ['data'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'data' && oldValue !== newValue) {
this._data = JSON.parse(newValue);
this._render();
}
}
_render() {
const tbody = this.shadowRoot.getElementById('tbody');
tbody.innerHTML = '';
this._data.forEach((item) => {
const tr = document.createElement('tr');
const td1 = document.createElement('td');
td1.textContent = item.name;
const td2 = document.createElement('td');
td2.textContent = item.age;
tr.appendChild(td1);
tr.appendChild(td2);
tbody.appendChild(tr);
});
}
_filterByName(name) {
const filteredData = this._data.filter((item) => {
return item.name.toLowerCase().includes(name.toLowerCase());
});
this.dispatchEvent(new CustomEvent('data-change', {
bubbles: true,
composed: true,
detail: {
data: filteredData
}
}));
}
_filterByAge(age) {
const filteredData = this._data.filter((item) => {
return item.age >= age;
});
this.dispatchEvent(new CustomEvent('data-change', {
bubbles: true,
composed: true,
detail: {
data: filteredData
}
}));
}
}
customElements.define('my-table', MyTable);
const myTable = document.querySelector('my-table');
myTable.addEventListener('data-change', (event) => {
myTable.setAttribute('data', JSON.stringify(event.detail.data));
});
</script>在上面的示例中，我们定义了一个名为 my-table 的组件，并传递了一个 data 属性。在组件的构造函数中，我们创建了一个 Shadow DOM，并将组件模板插入到其中。在组件的 observedAttributes 静态属性中，我们指定了要监听的属性名。在组件的 attributeChangedCallback 方法中，我们可以获取到传递过来的属性值，并将其渲染到组件中。在组件中，我们添加了两个文本框，用于输入筛选条件。在文本框的 input 事件处理函数中，我们根据输入的条件筛选数据，并触发了一个名为 data-change 的自定义事件，将筛选后的数据传递给外部。在使用 my-table 组件的页面中，我们可以通过监听 data-change 事件来获取传递过来的数据，并将其更新到组件中。
总结
Web Components 中的 prop 传递和事件监听是实现组件之间通信的常用方式。通过使用它们，我们可以更方便地组合和复用组件，提高开发效率和代码质量。在实际项目中，我们可以根据具体的需求选择合适的通信方式，并结合其他技术来实现更复杂的功能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6587e121eb4cecbf2dd1612a