将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