将数据从 PHP/HTML 传递到 .vue 组件答案

【问题标题】：Passing data from PHP/HTML to .vue Component将数据从 PHP/HTML 传递到 .vue 组件
【发布时间】：2019-05-31 14:32:00
【问题描述】：

我正在尝试做的事情看似简单，但我似乎无法弄清楚。基本上，我有 2 个文件：

包含以下内容的 PHP 文件：

...
<user-panel v-if="user.id  && loaded" v-bind:user="user" v-bind:name="theUserName"></user-panel>
...

具有以下内容的 .Vue 组件文件（被编译到另一个文件中）：

<template>
    <span id="userPanel" class="d-flex align-items-center">
        <a href="#" role="button" class="user-dropdown-toggle">
            <div class="logged-in d-flex align-items-center">
                <span class="d-flex align-items-center justify-contnet-center"></span>
                {{name}}
            </div>
        </a>
    </span>
</template>

<script>
    export default {
        name: "UserPanel",
        props: ['user'],
        created () {
            console.log(this.$refs.myTestField.value)
        }
    }
</script>

我想做的就是将数据从 PHP 传递到 Vue 到 {{name}}。我已经尝试过 v-bind、数据属性、隐藏输入等。任何帮助将不胜感激。

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

我的目的是将数据从我的 .php 文件传输到 VUE 代码所在的 .js 文件。在这里，我向您展示我的代码。在提议的示例中，我想导入一个简单的字符串，随后我想导入一个 JSON。太感谢了。文件 PHP

<div id='app'> <App v-bind:import='Value Import'> C'è QUALCHE PROBLEMA </App> </div>"

文件.js

var App = Vue.component("App", {
    template: `
      <div class="container">
        <div>
          <h2>{{ titolo }}</h2>
          <h3>{{ import }}</h3>

        </div>
      </div>
    `,
    props: ['import'],

    data() {
      return {
        color: "color: red",
        titolo: "Inizio Container",
      };
    }
  });

  new Vue({
    el: "#app",
  });

Quanto sopra purtroppo non funziona。

【讨论】：

【解决方案2】：

假设您有一个包含字符串的 php 变量。 $phpString

PHP 文件

...
<my-component v-bind:myProperty="<?php echo $phpString ?>"></my-component>
...

^{在回显之前不要忘记转义$phpString。}

在您的 Vue 中定义一个名为 myProperty 的属性：

<template>
  <span>
    {{ myProperty }}
  </span>
</template>

<script>
export default {
  props: ['myProperty']
}
</script>

【讨论】：

【解决方案3】：

Vue 单文件组件在客户端处理。

有SSR，但是，由于您的服务器上有php，因此您必须设置一个REST服务，以便您可以使用fetch或axios来消费服务器数据并将其呈现给客户端。

【讨论】：

谢谢。如果我只是将我需要的内容包含在隐藏的输入中，然后从中获取呢？