Question

我正在尝试做的事情看似简单，但我似乎无法弄清楚。基本上，我有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，数据属性，隐藏的输入等。任何帮助将不胜感激。

Answer 1

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

有SSR，但是，由于服务器上装有php，因此必须设置REST服务，以便可以使用fetch或axios来使用服务器数据并进行显示到客户端。

Answer 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>

Answer 3

我的意图是将数据从我的.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。

Answer 4

vue命令（（v-if，v-show等）无法在PHP文件上使用。将类似以下的数据传递给vue组件，然后处理其中的其余部分

<flash message="{{ $message }}"></flash>

定义vue组件，例如在加载js文件中进行如下操作： app.js

Vue.component('flash', require('./components/Flash.vue'));

并使用vue文件中的数据

<template>
    <div class="alert alert-flash"
         :class="'alert-'+level"
         role="alert"
         v-show="show">
        <strong>Success!</strong> {{ body }}
    </div>
</template>

<script>
    export default {
        props: ['message'],
        data () {
            return {
                body: '',
                show: false,
                level: 'success',
            }
        },
        created () {
            if (this.message) {
                this.flash(this.message)
            }
            window.events.$on(
                'flash',
                data => this.flash(data),
            )
        },
        methods: {
            flash (data) {
                this.body = data.message
                this.level = data.level
                this.show = true
                this.hide()
            },
            hide () {
                setTimeout(() => {
                    this.show = false
                }, 3000)
            },
        },
    }
</script>
<style>
    .alert-flash {
        position: fixed;
        right: 25px;
        bottom: 25px;
    }
</style>

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

4 个答案: