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

Posted 2023-02-22

【中文标题】将 PHP 变量传递给 vue.js vue 组件

【英文标题】：Passing PHP variable to vue.js vue component

【发布时间】：2019-11-02 16:47:22

【问题描述】：

我在一个 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

【参考方案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

【讨论】：

我在我的 functions.php 中添加了 wp_localize_script 并且它可以工作现在我很难将新创建的 JS 对象传递给我的 Vue 组件。我尝试按照您的教程进行操作，但它一直说未定义。

如果您可以使用应用程序的created 生命周期挂钩中的console.log(window.foo) 记录您的值，也许您可​​以在那里或直接在data 函数内分配值？

这是为我做的。当我console.log(window.foo) 时，我能够看到我的数据，这有助于解决所有其他未知数