Question

我有app.js文件：

require('./bootstrap');

window.Vue = require('vue');
import Home from './components/Home'

const app = new Vue({
    el: '#root',
    render: h => h(Home)
});

然后在我的Home.vue中，我有

<template>
    <div>

        <app-footer v-bind:mylinks="mylinks"></app-footer>
    </div>
</template>

<script>
    import Links from './home/Link.vue'

    export default {
        components: {
            'app-footer': Links
        },
        data() {
            return {
                mylinks: links
            }
        }
    };
</script>

然后在我的Link.vue中，我拥有：

<template>
    <footer>
        <nav>
            <ul class="menu-items">
                <li v-for="link in mylinks"><a :href="link.url" class="menu-item">{{ link.title }}</a></li>
            </ul>
        </nav>
    </footer>
</template>

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

在app.js之前和脚本中，我有：

<script>
        var links = {
            [title: 'home', url: '{{ route("home") }}'],
            [title: 'about', url: '{{ route("about") }}'],
            [title: 'privacy', url: '{{ route("privacy") }}'],
            [title: 'terms', url: '{{ route("terms") }}'],
            [title: 'contact', url: '{{ route("contact") }}'],
            [title: 'login', url: '{{ route("login") }}']
        };
    </script>

如何将我的链接对象传递给Home.vue mylinks？

我无法在app.js脚本之后将其推送到该对象，因为它不在app.data中，而是在Home.vue数据中？

Answer 1

您的网站上到处都有相同的页脚吗？如果是，则无需将链接传递到页脚组件。您只需将带有链接对象的js文件导入其中即可。

创建`footer.links.js'并将其放入其中：

const route = function() { ... }
const links = {
  [title: 'home', url: '{{ route("home") }}'],
  [title: 'about', url: '{{ route("about") }}'],
  [title: 'privacy', url: '{{ route("privacy") }}'],
  [title: 'terms', url: '{{ route("terms") }}'],
  [title: 'contact', url: '{{ route("contact") }}'],
  [title: 'login', url: '{{ route("login") }}']
}
export links

然后在页脚组件中：

<script>
  import { links } from '~/footer.links.js'
  ...  
</script>

如何将对象从Vue实例传递到实例数据

1 个答案: