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

Question

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

索引.php

<?php 

$foo = 72;

?>

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

应用程序.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({&nbsp; el: '#app',&nbsp; render: h => h(App),&nbsp; propsData: { foo }});...然后在 App.vue 中用 props 替换数据：<script>export default {&nbsp; name: 'App',&nbsp; props: ['foo'],}</script>我自己还没有测试过这个，所以 YMMV 但这基本上是你应该如何解决这个问题。提供更多上下文可以指向其他解决方案，例如现成的 Vue.js / WordPress 框架，例如Gridsome或NuePress