将 PHP 变量传递给 vue.js vue 组件

Question

我在一个 wordpress 网站上工作，我需要将一个 php 字符串变量传递给一个 .vue 组件，以便其中一个 vue 变量将反映 php 变量的值

index.php

<?php 
$foo = 72;
?>

<div id='app'></div>

app.js

import App from './views/App';
new Vue({
  el: '#app',
  render: h => h(App)
});

./views/App.vue

<template>
<h1>{{ foo }}</h1>
</template>

<script>
export default {
name: 'App',
 data() {
  return {
   foo: ''
  }
 }
}
</script>

<style></style>

正如您在 index.php 中看到的，$foo = 72。我希望将 72 的值传递给 App.vue 中的 $foo

Answer 1

在 WordPress 上下文中，您可以使用所需数据调用 wp_localize_script，以便它在初始化 Vue.js 应用程序的脚本的全局空间中可用。

假设你事先注册了vue-script：

<?php
$foo = 42;
wp_localize_script('vue-script', 'foo', $foo);
wp_enqueue_script('vue-script');

然后在脚本中你可以在创建 Vue 实例时使用propsData 传递foo：

import App from './views/App';
new Vue({
  el: '#app',
  render: h => h(App),
  propsData: { foo }
});

...然后用 App.vue 中的 props 替换数据：

<script>
export default {
  name: 'App',
  props: ['foo'],
}
</script>

我自己没有测试过这个，所以 YMMV 但这基本上是你应该如何处理这个问题。提供更多上下文可能指向其他解决方案，例如现成的 Vue.js / WordPress 框架，例如 Gridsome 或 NuePress