Question

我已经定义了一个名为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>

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

字段（所有字段的数组）
特定资源的唯一令牌
当前活动字段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组件，所以我想知道一旦需要另一个变量会发生什么发送给它-我必须在所有地方进行更新。

VueJS / Laravel-Laravel和Vue之间共享道具

0 个答案: