想直接看代碼？請?zhí)^本節(jié)。

本教程基于Vue 2編寫，并使用“內(nèi)聯(lián)模板”。Vue 3已棄用此功能，但您可以使用替代方法（例如將模板放在script標(biāo)簽中）來實現(xiàn)類似的效果。

幾個月前，我正在構(gòu)建一個WordPress網(wǎng)站，需要一個包含許多高級條件字段的表單。不同的選擇需要不同的選項和信息，而我們的客戶需要完全控制所有字段¹。此外，該表單需要出現(xiàn)在每個頁面的多個位置，并具有略微不同的配置。

并且表單的標(biāo)題實例需要與漢堡菜單互斥，以便打開一個會關(guān)閉另一個。

并且表單包含與SEO相關(guān)的文本內(nèi)容。

并且我們希望服務(wù)器響應(yīng)能夠呈現(xiàn)一些可愛的動畫反饋。

（呼?。?/p>

整個過程感覺足夠復(fù)雜，以至于我不想手動處理所有這些狀態(tài)。我記得讀過Sarah Drasner的文章“用Vue.js替換jQuery：無需構(gòu)建步驟”，該文章展示了如何用簡單的Vue微型應(yīng)用替換經(jīng)典的jQuery模式。這似乎是一個不錯的起點，但我很快意識到在WordPress的PHP端事情會變得很混亂。

我真正需要的是可重用的組件。

PHP → JavaScript

我喜歡Jamstack工具（如Nuxt）的靜態(tài)優(yōu)先方法，并希望在這里做類似的事情——從服務(wù)器發(fā)送完整內(nèi)容，并在客戶端逐步增強(qiáng)。

但是PHP沒有內(nèi)置的方法來處理組件。然而，它支持在其他文件中包含文件²。WordPress有一個名為get_template_part的require抽象，它相對于主題文件夾運行，并且更容易使用。將代碼劃分為模板部分是WordPress提供的最接近組件的東西³。

另一方面，Vue完全是關(guān)于組件的——但它只能在頁面加載并運行JavaScript后才能發(fā)揮作用。

這種范例結(jié)合的秘訣在于鮮為人知的Vue指令inline-template。它強(qiáng)大的功能允許我們使用現(xiàn)有的標(biāo)記來定義Vue組件。它是從服務(wù)器獲取靜態(tài)HTML和在客戶端掛載動態(tài)DOM元素之間的完美中間地帶。

首先，瀏覽器獲取HTML，然后Vue使其發(fā)揮作用。由于標(biāo)記是由WordPress構(gòu)建的，而不是由瀏覽器中的Vue構(gòu)建的，因此組件可以輕松使用網(wǎng)站管理員可以編輯的任何信息。并且，與.vue文件（非常適合構(gòu)建更多應(yīng)用程序式的東西）相反，我們可以保持與整個網(wǎng)站相同的關(guān)注點分離——PHP中的結(jié)構(gòu)和內(nèi)容，CSS中的樣式以及JavaScript中的功能。

為了展示這一切是如何組合在一起的，我們將為一個食譜博客構(gòu)建一些功能。首先，我們將添加一種供用戶評價食譜的方法。然后，我們將基于該評分構(gòu)建一個反饋表單。最后，我們將允許用戶根據(jù)標(biāo)簽和評分過濾食譜。

我們將構(gòu)建一些共享狀態(tài)并在同一頁面上運行的組件。為了使它們能夠很好地協(xié)同工作——并方便將來添加其他組件——我們將整個頁面作為我們的Vue應(yīng)用程序，并在其中注冊組件。

每個組件都將位于其自己的PHP文件中，并使用get_template_part包含在主題中。

基礎(chǔ)工作

將Vue應(yīng)用于現(xiàn)有頁面時，需要考慮一些特殊情況。首先，Vue不希望您在其中加載腳本——如果您這樣做，它會向控制臺發(fā)送不祥的錯誤。避免此問題的最簡單方法是在每個頁面的內(nèi)容周圍添加一個包裝元素，然后在包裝元素外部加載腳本（出于各種原因，這已經(jīng)是常見模式）。如下所示：

<?php /* header.php */ ?>
<div id="site-wrapper">

<?php /* footer.php */ ?>
</div>
<?php wp_footer(); ?>

第二個考慮因素是Vue必須在body元素的末尾調(diào)用，以便它在其余DOM可用解析之后加載。我們將true作為第五個參數(shù)（in_footer）傳遞給wp_enqueue_script函數(shù)。此外，為了確保Vue首先加載，我們將它注冊為主腳本的依賴項。

<?php // functions.php

add_action( 'wp_enqueue_scripts', function() {
  wp_enqueue_script('vue', get_template_directory_uri() . '/assets/js/lib/vue.js', null, null, true); // 在生產(chǎn)環(huán)境中更改為vue.min.js
  wp_enqueue_script('main', get_template_directory_uri() . '/assets/js/main.js', 'vue', null, true);
});

最后，在主腳本中，我們將在site-wrapper元素上初始化Vue。

// main.js

new Vue({
  el: document.getElementById('site-wrapper')
})

星級評分組件

我們的單篇文章模板目前如下所示：

<?php /* single-post.php */ ?>
<?php /* ... 文章內(nèi)容 */ ?>

我們將注冊星級評分組件并添加一些邏輯來管理它：

// main.js

Vue.component('star-rating', {
  data () {
    return {
      rating: 0
    }
  },
  methods: {
    rate (i) { this.rating = i }
  },
  watch: {
    rating (val) {
      // 通過在每次更改時檢查它來防止評分超出范圍
      if (val > 5) 
        this.rating = 5

      // ... 將保存到localStorage或其他地方的一些邏輯
    }
  }
})

// 確保在注冊所有組件后初始化 Vue
new Vue({
  el: document.getElementById('site-wrapper')
})

我們將組件模板寫入一個單獨的PHP文件中。該組件將包含六個按鈕（一個用于未評分，五個帶星）。每個按鈕將包含一個SVG，其填充為黑色或透明。

<?php /* components/star-rating.php */ ?>
<star-rating inline-template="">
  <div>
    <p>評價食譜：</p>
    <svg v-for="i in 5" :key="i"><path :fill="rating >= i ? 'black' : 'transparent'" d="..."></path></svg>
  </div>
</star-rating>

根據(jù)經(jīng)驗，我喜歡為組件的頂部元素提供一個與組件本身相同的類名。這使得在標(biāo)記和CSS之間進(jìn)行推理變得容易（例如，<star-rating></star-rating>可以被認(rèn)為是.star-rating）。

現(xiàn)在我們將它包含在我們的頁面模板中。

<?php /* single-post.php */ ?>
<?php /* 文章內(nèi)容 */ ?>
<?php get_template_part('components/star-rating'); ?>

所有模板內(nèi)的HTML都是有效的，并且瀏覽器可以理解，除了<star-rating></star-rating>。我們可以通過使用Vue的is指令來解決這個問題：

<div inline-template="" is="star-rating">...</div>

現(xiàn)在假設(shè)最大評分不一定是5，而是可以使用流行的WordPress插件Advanced Custom Fields（為頁面、帖子和其他WordPress內(nèi)容添加自定義字段）由網(wǎng)站編輯器控制。我們只需要將其值注入到我們將調(diào)用的組件的prop中，我們將其稱為maxRating：

<?php // components/star-rating.php

// max_rating 是 ACF 字段的名稱
$max_rating = get_field('max_rating');
?>
<div :max-rating="<?= $max_rating ?>" inline-template="" is="star-rating">
  <div>
    <p>評價食譜：</p>
    <svg v-for="i in maxRating" :key="i"><path :fill="rating >= i ? 'black' : 'transparent'" d="..."></path></svg>
  </div>
</div>

在我們的腳本中，讓我們注冊prop并替換魔術(shù)數(shù)字5：

// main.js

Vue.component('star-rating', {
  props: {
    maxRating: {
      type: Number,
      default: 5 // 高亮顯示
    }
  },
  data () {
    return {
      rating: 0
    }
  },
  methods: {
    rate (i) { this.rating = i }
  },
  watch: {
    rating (val) {
      // 通過在每次更改時檢查它來防止評分超出范圍
      if (val > maxRating) 
        this.rating = maxRating

      // ... 將保存到localStorage或其他地方的一些邏輯
    }
  }
})

為了保存特定食譜的評分，我們需要傳入帖子的ID。同樣的想法：

<?php // components/star-rating.php

$max_rating = get_field('max_rating');
$recipe_id = get_the_ID();
?>
<div :max-rating="<?= $max_rating ?>" :recipe-id="<?= $recipe_id ?>" inline-template="" is="star-rating">
  <div>
    <p>評價食譜：</p>
    <svg v-for="i in maxRating" :key="i"><path :fill="rating >= i ? 'black' : 'transparent'" d="..."></path></svg>
  </div>
</div>

// main.js

Vue.component('star-rating', {
  props: {
    maxRating: { 
      // 與之前相同
    },
    recipeId: {
      type: String,
      required: true
    }
  },
  // ...
  watch: {
    rating (val) {
      // 與之前相同

      // 在每次更改時，保存到某個存儲
      // 例如 localStorage 或發(fā)布到 WP 評論端點
      someKindOfStorageDefinedElsewhere.save(this.recipeId, this.rating)
    }
  },
  mounted () {
    this.rating = someKindOfStorageDefinedElsewhere.load(this.recipeId)    
  }
})

現(xiàn)在我們可以將同一個組件文件包含在存檔頁面（文章循環(huán)）中，而無需任何額外設(shè)置：

<?php // archive.php

if (have_posts()): while ( have_posts()): the_post(); ?>
<?php // 摘要、特色圖片等，然后：
  get_template_part('components/star-rating'); ?>
<?php endwhile; endif; ?>

...(剩余內(nèi)容過長，已省略)... 請注意，由于篇幅限制，我無法完整地生成剩余的代碼。 但是，根據(jù)您提供的文本，我可以繼續(xù)生成類似的偽原創(chuàng)內(nèi)容，只要您提供更多輸入。 請告訴我您希望我接下來做什么。

以上是如何在WordPress主題中構(gòu)建VUE組件的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！