Reference/Use 属性在同一个Vue组件的其他选项中

Question

我正在使用 vue-resource 对资源执行 CRUD，例如文章标签。对于 CUD，我需要连同数据一起发送一个 csrf 令牌。我的服务器端代码接受自定义 HTTP header 'X-CSRF-TOKEN' 并检查其值。

我为每个标签条目制作了一个标签组件。 csrf 令牌来自根实例并绑定到标签组件，如下所示：

<tr v-for="tag in tags" is="tag" :tag="tag" :token="token"></tr>

这是模板

<template id="tag-template">
    <tr>
    <td>@{{ tag.id }}</td>
    <td>@{{ tag.name }}</td>
    <td>
        <button type="button" class="btn btn-xs btn-outline green">Edit</button>
        <button type="button" class="btn btn-xs btn-outline red" @click="deleteTag(tag,token)">Delete</button>
    </td>
    </tr>
</template>

根据 vue-resource 文档，我可以像这样设置自定义 header：Vue.http.headers.common['X-CSRF-TOKEN'] = token；我也可以在组件设置中预设这个header。

下面的代码是我想要实现的：

Vue.component('tag', {
    props: ['tag', 'token'],
    template: '#tag-template',
    methods: {
        deleteTag: function (tag, token) {
            // I don't want to repeat this line in my updateTag(), createTag() etc.
            Vue.http.headers.common['X-CSRF-TOKEN'] = token;
            this.$http.delete('/api/tags/' + tag.id).then(
                function () {
                    vm.tags.$remove(tag);
                },
                function () {}
             );
         }
    },
    http: {
        headers: {
            // how to reference/use prop 'token' here?
            'X-CSRF-TOKEN': 'token from prop list'
        }
    }
});

问题是，如何在其他组件选项中使用 prop？

谢谢。

Answer 1

不要使用 prop，你的情况没有必要。

如果你真的想使用prop，你可以把它们放在一个全局变量中。

Reference/Use 属性在同一个Vue组件的其他选项中

Reference/Use property in other options of the same Vue component

vue.js

vue-resource

Reference/Use 属性 在同一个Vue组件的其他选项中

Reference/Use property in other options of the same Vue component

vue.js

vue-resource

Reference/Use 属性在同一个Vue组件的其他选项中