我正在一個 wordpress 站點上工作，我需要將一個 php 字符串變量傳遞給 .vue 組件，以便 vue 變量之一反映 php 變量的值索引.php<?php $foo = 72;?><div id='app'></div>應(yīng)用程序.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
1 回答
牛魔王的故事
TA貢獻1830條經(jīng)驗 獲得超3個贊
在 WordPress 的上下文中，您將wp_localize_script使用所需的數(shù)據(jù)進行調(diào)用，以便它在初始化 Vue.js 應(yīng)用程序的腳本的全局空間中可用。
假設(shè)您已vue-script預(yù)先注冊：
<?php
$foo = 42;
wp_localize_script('vue-script', 'foo', $foo);
wp_enqueue_script('vue-script');
然后在腳本中，您可以在創(chuàng)建 Vue 實例時使用propsData向下傳遞foo：
import App from './views/App';
new Vue({
el: '#app',
render: h => h(App),
propsData: { foo }
});
...然后在 App.vue 中用 props 替換數(shù)據(jù)：
<script>
export default {
name: 'App',
props: ['foo'],
}
</script>
我自己還沒有測試過這個，所以 YMMV 但這基本上是你應(yīng)該如何解決這個問題。提供更多上下文可以指向其他解決方案，例如現(xiàn)成的 Vue.js / WordPress 框架，例如Gridsome或NuePress
- 1 回答
- 0 關(guān)注
- 349 瀏覽
添加回答
舉報
0/150
提交
取消