将 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 应用程序的脚本的全局 space 中可用。

假设您已经预先注册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 中的道具替换数据：

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

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

Passing PHP variable to vue.js vue component