Biên dịch các mẫu Vue.js trên Fly với v-runtime-template

---

Gần đây, tôi đã phát hành v-runtime-template , một thành phần Vue giúp dễ dàng biên dịch và diễn giải mẫu Vue.js trong thời gian chạy bằng cách sử dụng API giống v-html .

Tôi đã gặp sự cố trong một dự án mà tôi phải nhận mẫu từ server . Tại sao bạn nói? Vâng, hãy tưởng tượng giao diện kéo thả thông thường cho phép user xây dựng một số loại giao diện. Điều đó được lưu dưới dạng mã mẫu Vue sử dụng các thành phần được triển khai trên giao diện user . Giao diện user thực hiện lệnh gọi API để truy cập nội dung đó sau đó để điền vào một phần của trang.

Bạn có thể đã làm điều đó với HTML thuần túy sử dụng v-html . Hãy xem một ví dụ để dễ hiểu hơn.

Chèn HTML thuần với v-html

Sử dụng v-html bạn có thể đưa HTML vào bất kỳ phần tử DOM nào một cách nhanh chóng:

<template>
  <div>
    <div v-html="template"></div>
  </div>
</template>

<script>
export default {
  data: () => ({
    template: `
      <h2>Howdy Yo!</h2>
      <a href="croco-fantasy">Go to the croco-fantasy</a>
    `
  }),
};
</script>

Được rồi, điều đó có vẻ hợp lệ . Chuỗi template hoàn toàn có thể đến từ một lệnh gọi Ajax của server . Vấn đề là, nếu ta muốn mẫu có một số mã mẫu Vue?

export default {
  data: () => ({
    template: `
      <app-title>Howdy Yo!</app-title>
      <vue-router to="/croco-fantasy">Go to the croco-fantasy</vue-router>
    `
  }),
};

v-html sẽ diễn giải mẫu đó chỉ là HTML thuần túy và các thẻ đó không tồn tại trong HTML.

Nhập v-runtime-template

Đó là lúc v-runtime-template phát huy tác dụng. Nó cung cấp một API tương tự như v-html nhưng nó diễn giải mã mẫu Vue cụ thể.

v-runtime-template tự động lấy ngữ cảnh của thành phần mẹ nơi nó được sử dụng và sau đó nó sử dụng một thành phần động để cho phép Vue biên dịch và đính kèm, như bạn thấy trong hàm kết xuất của mã .

Để làm cho mã trước đó hoạt động, bạn chỉ cần sử dụng v-runtime-template chuyển template prop như sau:

<template>
  <div>
    <v-runtime-template :template="template"/>
  </div>
</template>

<script>
import VRuntimeTemplate from "v-runtime-template";

export default {
  data: () => ({
    template: `
      <app-title>Howdy Yo!</app-title>
      <vue-router to="/croco-fantasy">Go to the croco-fantasy</vue-router>
    `
  }),
};
</script>

Lưu ý khi sử dụng v-runtime-template bạn vẫn có các luật giống như khi bạn sử dụng mẫu đó như một phần của thành phần của bạn . Trong trường hợp này, app-title hoặc vue-router phải được đăng ký global hoặc được thêm vào thành phần:

import VRuntimeTemplate from "v-runtime-template";
import AppTitle from "./AppTitle";

export default {
  data: () => ({
    template: `
      Howdy Yo!
      Go to the croco-fantasy
    `
  }),
  components: {
    AppTitle
  }
};

Truy cập Phạm vi chính

Một điều thú vị về v-runtime-template là nó có thể truy cập phạm vi của cha mẹ, nghĩa là bất cứ thứ gì có thể truy cập được thông qua data , props , computed hoặc methods . Do đó, bạn có thể có các mẫu động có dữ liệu phản ứng có thể truy cập từ phụ huynh.

Ví dụ: mẫu sau có thể truy cập animal :

export default {
  data: () => ({
    animal: "Crocodile",
    template: `
      <app-title>Howdy {{animal}}!</app-title>
    `
  })
  // ...

Hoặc gọi một phương thức:

export default {
  data: () => ({
    animal: "Crocodile",
    template: `
      <app-title>Howdy {{animal}}!</app-title>
      <button @click="goToCrocoland">Go to crocoland</button>
    `
  }),
  methods: {
    goToCrocoland() {
      // ...
    }
  }
  // ...

Các chuỗi hoặc mẫu server của bạn chưa bao giờ được kết nối nhiều hơn với ứng dụng của bạn!

Kết thúc

v-runtime-template được tạo ra để dễ dàng giải quyết, sử dụng cú pháp giống v-html , vấn đề diễn giải các mẫu một cách nhanh chóng cho các trường hợp như mẫu đến từ một server ; nơi chúng được nhận trong thời gian chạy.

Nếu bạn cần thêm thông tin, bạn có thể kiểm tra bản demo hoặc kho lưu trữ chính thức. Hãy để lại phản hồi của bạn ở đó!

Giữ bình tĩnh 🦄

---

---

Các tin liên quan