亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 77
粉絲 0
評論 0
訪問量 80561
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
Vue3組件的傳值、插槽，Vue3新路由和子路由配置和使用
Jet的博客
原創(chuàng)
2916人瀏覽過

一、Vue3組件的傳值

1、傳值

  • App.vue文件
  1. <template>
  2.   <div>歐陽克</div>
  3.   <OyDiv style="color:red;" size="2" type="wrning">歐陽組件</OyDiv>
  4.   <Ztp></Ztp>
  5. </template>
  7. <script>
  8. import OyDiv from "./components/OyDiv.vue";
  9. export default{
  10.   // data:數(shù)據(jù); methods:js計算屬性等; 
  11.   // components:組件; 使用組件,傳值
  12.   components:{
  13.     OyDiv
  14.   },
  15. }
  • OyDiv.vue組件文件（組件文件）
  1. <template>
  2.     <div>{{ size }}</div>
  3.     <div>{{ type }}</div>
  4. </template>
  6. <script>
  7. export default({
  8.     // 1.組件里面的api都是和頁面文件一樣的
  9.     // props:配置項,是接收傳值的
  10.     // props:接收的值,直接跟data里的數(shù)據(jù)一樣使用
  11.     props: ['size', 'type']
  12. })
  13. </script>

2、可以多個組件

  • App.vue文件
  1. <template>
  2.   <div>歐陽克</div>
  3.   <!--
  4.   <oy-div style="color:red;" size="2">歐陽組件</oy-div>
  5.   <OyDiv style="color:red;" size="2">歐陽組件</OyDiv>
  6.   -->  
  7.   <OyDiv style="color:red;" size="2" type="wrning">歐陽組件</OyDiv>
  8.   <Ztp></Ztp>
  9. </template>
  • Ztp.vue文件（組件文件）
  1. <template>
  2.     <div>朱天蓬組件</div>
  3. </template>

3、組件引入多個子組件

  • App.vue組件文件
  1. <template>
  2.   <div>歐陽克</div>
  3.   <OyDiv style="color:red;" size="2" type="wrning">歐陽組件</OyDiv>
  5. </template>
  7. <script>
  8. import OyDiv from "./components/OyDiv.vue";
  9. export default{
  10.   // data:數(shù)據(jù); methods:js計算屬性等; 
  11.   // components:組件; 使用組件,傳值
  12.   components:{
  13.     OyDiv
  14.   },
  15. }
  • Ztp.vue子組件
  1. <template>
  2.     <div>{{ size }}</div>
  3.     <div>{{ type }}</div>
  4.     <Ztp></Ztp>
  5. </template>
  7. <script>
  8. import Ztp from "./Ztp.vue";
  9. export default({
  10.     // 1.組件里面的api都是和頁面文件一樣的
  11.     // props:配置項,是接收傳值的
  12.     // props:接收的值,直接跟data里的數(shù)據(jù)一樣使用
  13.     props: ['size', 'type'],
  14.     components: {
  15.         Ztp
  16.     }
  17. })
  18. </script>

4、傳值的配置項

  • app.vue文件
  1. <template>
  2.   <div>歐陽克</div>
  3.   <OyDiv style="color:red;" :arr="arr_v"  types="wrning">歐陽組件</OyDiv>
  4. </template>
  6. <script>
  7. import OyDiv from "./components/OyDiv.vue";
  8. export default{
  9.   // data:數(shù)據(jù); methods:js計算屬性等; 
  10.   // components:組件; 使用組件,傳值
  11.   components:{
  12.     OyDiv
  13.   },
  15.   data(){
  16.     return {
  17.       arr_v:[
  18.         "歐陽克",
  19.         "朱天蓬"
  20.       ],
  21.     }
  22.   },
  23. }
  • OyDiv.vue文件
  1. <template>
  2.     <div>{{ size }}</div>
  3.     <div>{{ types }}</div>
  4.     <div>{{ arr }}</div>
  5.     <Ztp></Ztp>
  6. </template>
  8. <script>
  9. import Ztp from "./Ztp.vue";
  10. export default({
  11.     // 1.組件里面的api都是和頁面文件一樣的
  12.     // props:配置項,是接收傳值的
  13.     // props:接收的值,直接跟data里的數(shù)據(jù)一樣使用
  14.     props: {
  15.         size: {
  16.             type : Number,
  17.             required: true,
  18.             default: 0
  19.         },
  20.         types: {
  21.             type : String
  22.         },
  23.         arr : {
  24.             type : Array
  25.         }
  26.     },
  27.     components: {
  28.         Ztp
  29.     }
  30. })
  31. </script>

5、判斷值賦予樣式

  • OyButton.vue文件
  1. <template>
  2.     {{ size }}
  3.     {{ type }}
  4.     <button v-if="type==''" class="bottom">按鈕</button>
  5.     <button v-else-if="type=='primary'" class="bottom oy-button--primary">按鈕</button>
  6. </template>
  8. <script>
  9. export default({
  10.     props: {
  11.         size: {
  13.         },
  14.         type: {
  16.         },
  17.     },
  18. })
  19. </script>
  20. <style scoped>
  21. button { xxx }
  22. .oy-button--primary { xxx }
  23. <style>

  • App.vue文件
  1. <template>
  2.   <div>歐陽克</div>
  3.   <!--<OyDiv style="color:red;" :arr="arr_v"  types="wrning">歐陽組件</OyDiv>-->
  5.   <OyButton size="large" type=""></OyButton>
  7. </template>
  9. <script>
  10. import OyDiv from "./components/OyDiv.vue";
  11. import OyButton from "./components/OyButton.vue";
  12. export default{
  13.   // data:數(shù)據(jù); methods:js計算屬性等; 
  14.   // components:組件; 使用組件,傳值
  15.   components:{
  16.     OyDiv,
  17.     OyButton
  18.   },
  19. }
  21. </script>

  1. <OyButton size="large" type="primary"></OyButton>

@style scoped

  • scoped：可以穿透到其他文件使用，或者本文件單獨使用

6、插槽的使用方式：

  • 單個插槽

  • App.vue文件

    1. <template>
    2. <div>歐陽克</div>
    3. <!--插槽-->
    4. <OyButton size="large" type="primary">提交</OyButton>
    5. </template>

  • OnButton.vue文件

  1. <template>
  2.     {{ size }}
  3.     {{ type }}
  4.     <button class="bottom">
  5.         <!-- 添加一個插槽 -->
  6.         <!-- 插槽可以在組件的任意位置 -->
  7.         <slot></slot>
  8.     </button>
  9.     <button v-if="type==''" class="bottom">按鈕</button>
  10.     <button v-else-if="type=='primary'" class="bottom oy-button--primary">按鈕</button>
  11. </template>

  • 多個插槽

  • App.vue文件

  1.   <!--插槽-->
  2.   <OyButton size="large" type="primary">
  3.     提交
  4.     <span style="color:red">確定</span>
  6.     <!-- 用標簽來使用有名字的插槽 -->
  7.     <template v-slot:one>
  8.       <div style="color:greenyellow">確定</div>
  9.     </template>
  10.     <!-- 語法糖 # -->
  11.     <template #two>
  12.       <div style="color:blue">確定</div>
  13.     </template>
  15.   </OyButton>
  • OnButton.vue文件
  1. <template>
  2.     {{ size }}
  3.     {{ type }}
  5.     <button class="bottom">
  6.         <!-- 添加一個插槽 -->
  7.         <!-- 插槽可以在組件的任意位置 -->
  8.         <slot></slot>
  9.     </button>
  10.         <slot name="one"></slot>
  11.         <slot name="two"></slot>
  13.     <button v-if="type==''" class="bottom">按鈕</button>
  14.     <button v-else-if="type=='primary'" class="bottom oy-button--primary">按鈕</button>
  15. </template>

7、子組件調(diào)用父組件方法

  • App.vue文件
  1. <template>
  2.   <OyJs></OyJs>
  3. </template>
  4. <script>
  5. import OyJs from "./components/OyJs.vue";
  6. export default{
  7.   components:{
  8.     OyJs
  9.   },
  10.   data(){
  11.     return {
  13.     }
  14.   },
  15.   methods : {
  16.     fun(e){
  17.       console.log('父組件方法');
  18.       console.log(e);
  19.     }
  20.   },
  21. }
  22. </script>
  • OyJs.vue文件
  1. <template>
  2.     <div>OyJs</div>
  3.     <div>{{ OyJs_fun() }}</div>
  5.     <button @click="OyJs_fun(1)">按鈕</button>
  6. </template>
  8. <script>
  9. export default({
  10.     props: {
  12.     },
  13.     methods: {
  14.         OyJs_fun(e){
  15.             console.log('OyJs方法');
  17.             // 使用全局屬性
  18.             // $parent 上一級,父級方法
  19.             this.$parent.fun(e);
  20.             // 最頂層，根目錄
  21.             this.$root.fun(e);
  22.         }
  23.     }
  24. })
  25. </script>

this.$parent.fun： $parent 上一級，父級方法
this.$root.fun： $root 最頂層，根目錄

8、組件生命周期

聲明周期 作用
beforeCreate 在創(chuàng)建組件之前調(diào)用
created 組件創(chuàng)建完成調(diào)用
beforeMount 模板掛載之前調(diào)用
mounted 模板掛載完成調(diào)用
beforeUpdate 改變內(nèi)容之前調(diào)用
update 改變內(nèi)容之后調(diào)用
beforeUnmout 組件銷毀之前調(diào)用
unmounted 組件銷毀之后調(diào)用

二、Vue3路由

  • 路由文件路徑：src/router/index.js

  • 視圖文件路徑：src/view/XxXxx.vue

1、新增路由：

  • 1.1 創(chuàng)建視圖文件：
  • 1.2 新建路由：
  1. import MyView from '../views/MyView.vue'
  3.   routes: [
  4.     {
  5.       path: '/my',
  6.       name: 'my',
  7.       component: MyView
  8.     },
  9.   ]

2、單頁面跳轉(zhuǎn)

  1.   <router-link to = "/">首頁</router-link> |
  2.   <router-link to ="/about">幫助頁面</router-link> |
  3.   <router-link to = "/my">個人中心</router-link>

在頁面內(nèi)刷新跳轉(zhuǎn)新頁面，不用怎個頁面刷新

3、另外一個router跳轉(zhuǎn)方法

  • app.vue文件
  1. <el-button @click="go_url()">跳轉(zhuǎn)</el-button>
  1. <script>
  2.   methods : {
  4.     },
  5.     go_url(){
  6.       // 路由有個全局變量
  7.       // 用選項api,都是this. 可以訪問全局變量
  8.       // this.$route 獲取頁面信息
  9.       this.$router.push('/my');
  10.     }
  11.   },
  12. }
  13. </script>

路由跳轉(zhuǎn)不支持跳轉(zhuǎn)至外網(wǎng)，如需要可用a標簽
this.$router.push：是跳轉(zhuǎn)到新頁面
this.$route：是獲取頁面信息

自行配置跳轉(zhuǎn)參數(shù)

  1. go_url(){
  2.       // 路由有個全局變量
  3.       // 用選項api,都是this. 可以訪問全局變量
  4.       // this.$route 獲取頁面信息
  5.       //this.$router.push('/my');
  6.       console.log(this.$route);
  7.       // 用js跳轉(zhuǎn),增加傳值
  8.       this.$router.push({
  9.         path : '/my',
  10.         query : {
  11.           id:188,
  12.           oid:288
  13.         }
  14.       });

4、子路由

  • 4.1 創(chuàng)建視圖文件：

  • 4.2 新建路由：

  • 修改路由文件 index.js

子路由的path,不能在前面加反斜杠/

  1. import MyOrderView from '../views/MyOrderView.vue'
  2. import MyConfigView from '../views/MyConfigView.vue'
  4. const router = createRouter({
  5.   history: createWebHistory(import.meta.env.BASE_URL),
  6.   routes: [
  7.     {
  8.       path: '/my',
  9.       name: 'my',
  10.       component: MyView,
  11.       // 子路由的path,不能在前面加反斜杠/
  12.       children: [
  13.         {
  14.           path: 'order',
  15.           name: 'my_order',
  16.           component: MyOrderView,
  17.         },
  18.         {
  19.           path: 'config',
  20.           name: 'my_config',
  21.           component: MyConfigView
  22.         },
  23.       ]
  24.     },
  25.   ]
  26. })
  • 修改附近視圖文件 MyView.vue
  1. <template>
  2.   <div>
  3.       <h1>這是個人中心頁面</h1>
  4.       <router-link to="/my/order">訂單頁面</router-link> |
  5.       <router-link to="/my/config">配置頁面</router-link>
  6.       <router-view></router-view>
  7.   </div>
  8. </template>
  • 增加子路由文件：MyConfigView.vue、MyOrderView.vue
  1. <template>
  2.     <div><h1>這是個人中心配置頁面</h1></div>
  3. </template>
  1. <template>
  2.     <div><h1>這是個人中心訂單頁面</h1></div>
  3. </template>

批改老師：PHPzPHPz

批改狀態(tài)：合格

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學習者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學習
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學習！
    全站2000+教程免費學