1. 程式人生 > >Nuxt 巢狀路由nuxt-child元件(父子頁面元件的傳值)

Nuxt 巢狀路由nuxt-child元件(父子頁面元件的傳值)

Nuxt巢狀路由官網上的API詳解:點選連結

看了官網上的api實現了官網的案例你會發現訪問父頁面中只能顯示父頁面中的內容,要想預設的在<nuxt-child>區域顯示一個頁面內容怎麼辦?

 

自己案例程式碼:

pages/parent.vue

<template>
    <div>
        <h2>父元件的頁面的內容</h2>
        <ul>
            <!-- 進行切換子頁面,寫法同vue.js -->
            <li><nuxt-link to='/parent/child'>child</nuxt-link></li>
            <li><nuxt-link to='/parent/child2'>child2</nuxt-link></li>
        </ul>
        <hr>
        <div class="box">
            <p>巢狀子頁面內容區</p>
            <!-- <nuxt-child>標籤在父頁面元件中相當於是子頁面元件的佔位符;巢狀中這個不可少 -->
            <nuxt-child keep-alive :foobar="123"></nuxt-child>
        </div>
    </div>
</template>
<script>
export default {
    
}
</script>
<style scoped>
.box{
    margin-top: 20px;
    padding: 20px;
    border: 2px solid pink;
    border-radius: 5px;
}
</style>

pages/parent/index.vue

<template>
    <div>
        <h2>巢狀子元件中的預設頁面index.vue</h2>
    </div>
</template>
<script>
export default {
    
}
</script>
<style scoped>

</style>

pages/parent/child.vue

<template>
    <div>
        <h2>巢狀子元件中的頁面child</h2>
        <p>foobar:{{foobar}}</p>
    </div>
</template>
<script>
export default {
    props:['foobar']
}
</script>
<style scoped>

</style>

pages/parent/child2.vue

<template>
    <div>
        <h2>巢狀子元件中的頁面child2</h2>
        <p>foobar:{{foobar}}</p>
    </div>
</template>
<script>
export default {
    props: ['foobar']
}
</script>
<style scoped>

</style>

效果如下: