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

Question

我正在一个 wordpress 站点上工作，我需要将一个 php 字符串变量传递给 .vue 组件，以便 vue 变量之一反映 php 变量的值索引.php<?php $foo = 72;?><div id='app'></div>应用程序.jsimport 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