Tích hợp các thành phần web với ứng dụng Vue.js của bạn

Mặc dù thông số kỹ thuật và triển khai của Thành phần Web có thể không được coi là hoàn thiện, nhưng vẫn có một số thành phần và dự án khá thú vị trên mạng mà bạn có thể thấy hữu ích cho mục đích của riêng mình. Điều đó đang được nói, Vue vẫn cung cấp một lượng lớn các thành phần web đơn giản. (Trên thực tế, bạn thậm chí có thể tạo các Thành phần Web với Vue.) Chà, tại sao không có cái tốt nhất của cả hai thế giới? Việc sử dụng Web Components trong Vue thực sự rất đơn giản. Các điều kiện, thuộc tính và thậm chí cả ràng buộc sự kiện tiếp tục hoạt động giống như bạn mong đợi.

Sự chuẩn bị

(Hướng dẫn này giả định bạn đã bắt đầu một dự án Vue.js nhanh chóng với vue-cli và mẫu webpack-simple .)

Hãy tiếp tục tạo một thành phần web đơn giản minh họa các thuộc tính và sự kiện với càng ít mã càng tốt ....

Kìa: Đoạn văn tích tắc! Về cơ bản, nó là một shell bọc cho một đoạn văn. Bạn đặt nội dung văn bản của nó thông qua thuộc tính content . Ồ, và nó phát ra một sự kiện tick cứ sau nửa giây hoặc lâu hơn vì một số lý do. Đúng, tôi thiếu sự sáng tạo và / hoặc khả năng đưa ra bất cứ điều gì thực tế. Tiếp tục.

tick-paragraph.html

<template id="x-ticking-paragraph">
  <style>
    p {
      color: #42b983;
    }
  </style>
  <p id="renderTarget">
  </p>
</template>

<script>
  const currentScript = document.currentScript;

  customElements.define('x-ticking-paragraph', class extends HTMLElement {
    static get observedAttributes() { return ['contents'] }

    constructor() {
      super();
      let shadowRoot = this.attachShadow({mode: 'open'});
      const template = currentScript.ownerDocument.querySelector('#x-ticking-paragraph');
      const instance = template.content.cloneNode(true);
      shadowRoot.appendChild(instance);

      this.contents = '';

      setInterval(() => {
        this.dispatchEvent(new Event('tick'));
      }, 500);
    }

    set contents(value) {
      this._contents = value;
      this.shadowRoot.getElementById('renderTarget').innerText = this._contents;
    }

    get contents() {
      return this._contents;
    }

    attributeChangedCallback(name, oldValue, newValue) {
      this[name] = newValue;
    }
  });
</script>

Tôi biết rồi mà. Tôi đang sử dụng kiểu nhập khẩu HTML cũ của thành phần ở đây vì nó cảm thấy thanh lịch hơn… cho một thời đại văn minh hơn. Ngoài ra, nó hoàn toàn trông giống như một Vue Single File Component phải không? (Vue một phần được lấy cảm hứng từ thông số Thành phần Web root .)

Tôi sẽ không giải thích tất cả ở đây, thay vào đó, nếu bạn muốn xem cách tạo Thành phần Web phù hợp hơn cho Modern Times ™, ta cũng đã đề cập đến vấn đề đó .

Được rồi, bây giờ ta cần tải nó vào trang bằng cách nào đó. Ta cũng sẽ lấy một polyfill trong quá trình này để tính năng này hoạt động trên nhiều trình duyệt hơn là chỉ Chrome.

tick-paragraph.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vue + Web Components</title>
    <!-- Web Components Polyfill -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.13/webcomponents-lite.js"></script>
    <!-- Loading our component -->
    <link rel="import" href="./ticking-paragraph.html">
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

Bây giờ ta đã hoàn thành tất cả những điều đó, cuối cùng ta có thể sử dụng thành phần của bạn trong Vue như đã nêu trong tiêu đề ngay sau đoạn này.

Sử dụng thành phần của bạn trong Vue

Thực sự, điều duy nhất ta phải làm để Vue hoạt động với thành phần này là đưa nó vào danh sách trắng trong Vue.config.ignoredElements . Điều này chỉ cho Vue biết rằng phần tử / thành phần đến từ một nguồn mà Vue không biết về và giữ cho trình biên dịch không phàn nàn.

src / main.js

import Vue from 'vue';
import App from './App.vue';

Vue.config.ignoredElements = [
  'x-ticking-paragraph'
]

new Vue({
  el: '#app',
  render: h => h(App)
});

Bây giờ, hãy sử dụng thành phần như bất kỳ thành phần nào khác! Khả năng phản ứng vẫn còn nguyên vẹn!

src / App.vue

<template>
  <div id="app">
    <h1>Vue ❤ Web Components</h1>
    <x-ticking-paragraph :contents="paragraphContents" @tick="logTick"></x-ticking-paragraph>
  </div>
</template>

<script>
export default {
  data() {
    return {
      paragraphContents: `I'm data from Vue rendering in a Web Component!`
    }
  },

  methods: {
    logTick() {
      console.log(`The paragraph ticked again. >_>`)
    }
  }
}
</script>

Phần tốt nhất là bạn không cần phải thực hiện bất kỳ thay đổi nào đối với Thành phần Web hoặc ứng dụng Vue của bạn để bằng cách nào đó buộc chúng phải làm việc với nhau một cách miễn cưỡng. Nó hoạt động ra bên phải của hộp! Trên thực tế, bạn thậm chí có thể tích hợp các phần tử sử dụng nội bộ các khung công tác khác như Polymer hoặc React.

Bây giờ, điều này có ích như thế nào đối với bạn hoàn toàn phụ thuộc vào việc bạn có (hoặc muốn) sử dụng Web Components cùng với Vue hay không. Điều đó nói rằng, nếu không có gì khác, nó cho biết nếu Thành phần Web là tương lai, Vue là bằng chứng trong tương lai.

Tags:

Các tin liên quan

Cách làm việc với dữ liệu web bằng cách sử dụng yêu cầu và món súp đẹp mắt với Python 3
2017-07-14
Sử dụng Web worker một cách dễ dàng trong Vue.js với vue-worker
2017-05-16
Cách cài đặt Icinga và Icinga Web trên Ubuntu 16.04
2017-05-05
Cách lưu trữ nhiều trang web với Nginx và HAProxy bằng LXD trên Ubuntu 16.04
2017-04-19
Cách bảo mật ứng dụng web nông dân của bạn bằng Let's Encrypt trên Ubuntu 16.04
2017-03-29
Xây dựng các thành phần web gốc với Vue.js
2017-03-16
Cách sử dụng OpenResty Web Framework cho Nginx trên Ubuntu 16.04
2017-02-28
Roundup: Thư viện thành phần ứng dụng web trên máy tính để bàn Vue.js - Cập nhật Q4 2017
2017-02-23
Cách cài đặt Django Web Framework trên Debian 8
2016-12-21
Cách triển khai ứng dụng web Falcon với Gunicorn và Nginx trên Ubuntu 16.04
2016-11-16