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

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

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

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

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

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

（呼?。?/p>

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

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

PHP → JavaScript

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

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

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

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

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

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

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

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

基礎(chǔ)工作

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

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

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

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

<?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')
})

星級(jí)評(píng)分組件

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

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

我們將注冊(cè)星級(jí)評(píng)分組件并添加一些邏輯來管理它：

// main.js

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

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

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

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

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

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

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

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

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

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

現(xiàn)在假設(shè)最大評(píng)分不一定是5，而是可以使用流行的WordPress插件Advanced Custom Fields（為頁(yè)面、帖子和其他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íng)價(jià)食譜：</p>
    <svg v-for="i in maxRating" :key="i"><path :fill="rating >= i ? 'black' : 'transparent'" d="..."></path></svg>
  </div>
</div>

在我們的腳本中，讓我們注冊(cè)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) {
      // 通過在每次更改時(shí)檢查它來防止評(píng)分超出范圍
      if (val > maxRating) 
        this.rating = maxRating

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

為了保存特定食譜的評(píng)分，我們需要傳入帖子的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íng)價(jià)食譜：</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) {
      // 與之前相同

      // 在每次更改時(shí)，保存到某個(gè)存儲(chǔ)
      // 例如 localStorage 或發(fā)布到 WP 評(píng)論端點(diǎn)
      someKindOfStorageDefinedElsewhere.save(this.recipeId, this.rating)
    }
  },
  mounted () {
    this.rating = someKindOfStorageDefinedElsewhere.load(this.recipeId)    
  }
})

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

<?php // archive.php

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

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

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