时间戳

首页 > 解决方案 > VueJS/Laravel - 在 Laravel 和 Vue 之间共享 props

javascript - VueJS/Laravel - 在 Laravel 和 Vue 之间共享 props

问题描述

我已经定义了一个EditorNavigation.vue这样的组件：

<template>
   <div>
   <ul>
      <li v-bind:class="{'is-active':(active === field.id)}" v-for="field in fields">
          <a :href="'/streams/' + stream_token + '/fields/' + field.id">{{field.name}}</a>
      </li>
   </ul>
   <div>
</template>

<script>
    export default {
        props: ["fields", "active", "stream_token"],
        created() {
            this.fields = JSON.parse(this.fields);
            this.active = JSON.parse(this.active);
            this.stream_token = JSON.parse(this.stream_token);
        }
    };

</script>

正如您在我的组件中看到的，我需要三个变量：

  1. 字段（所有字段的数组）
  2. 特定资源的唯一令牌
  3. 当前活动的字段 id（所以我可以设置is-active类）。

在我的 Laravel 视图文件中，我使用如下组件：

show.blade.php

<editor-navigation fields="{{ json_encode($stream->fields) }}" active="{{ json_encode($field->id) }}" stream_token="{{ json_encode($field->stream->token) }}"></editor-navigation>

所以上面的代码工作正常，但是感觉有点“混乱”——因为我需要editor-navigation在很多页面中使用该组件，我想知道一旦我需要另一个变量发送给它会发生什么——我必须更新它在所有地方。

标签： javascriptphplaravelvue.js

解决方案

推荐阅读