ASCII码 ASCII码

Vue组件通信-插槽-路由-导航守卫-状态管理-组合API

发布于：2021-12-16 12:19:17  栏目：技术文档

Vue组件通信-插槽-路由-导航守卫-状态管理-组合API

创建 project-demo 项目

  1. npm install -g @vue/cli
  2. vue --version
  3. vue create project-demo

创建父子孙组件

views/Parent.vue

  1. <template>
  2.   <div>
  3.     <h1>Parent</h1>
  4.     <p>Parent - Demo</p>
  5.     <p>
  6.       <button @click="parentNum++">ParentNum++</button>
  7.       = {{ parentNum }}
  8.     </p>
  9.     <child-com :parentNum="parentNum"></child-com>
  10.   </div>
  11. </template>
  13. <script>
  14. // 自定义组件
  15. // 1. 导入组件
  16. import ChildCom from '../components/ChildCom.vue'
  18. export default {
  19.   name: 'Parent',
  20.   data() {
  21.     return {
  22.       parentNum: 10,
  23.     }
  24.   },
  25.   // 祖传孙 provide 提供（响应式）
  26.   provide() {
  27.     // 传递一个引用
  28.     return {
  29.       cParentNum: this.cParentNum,
  30.     }
  31.   },
  32.   methods: {
  33.     cParentNum() {
  34.       return this.parentNum
  35.     }
  36.   },
  37.   // 2. 注册组件
  38.   components: {
  39.     ChildCom,
  40.   }
  41. }
  42. </script>
  44. <style lang="scss" scoped>
  46. </style>

components/ChildCom.vue

  1. <template>
  2.   <div>
  3.     <h1>Child Com</h1>
  4.     <p>ChildCom - Parent - Demo</p>
  5.     <p>ChildCom props receive father: parentNum = {{ parentNum }}</p>
  6.     <p>
  7.       <button @click="addChildNum()">childNum++</button>
  8.       = {{ childNum }}
  9.     </p>
  10.     <!-- 父接收子，通过子声明的自定义事件 -->
  11.     <grand-son :childNum="childNum" @grandSonChangeFather="grandSonChangeMe"></grand-son>
  12.     <!-- 默认插槽 -->
  13.     <!-- <slot-com>Slot value</slot-com> -->
  14.     <!-- 具名插槽，使用模板 -->
  15.     <!-- <slot-com><template v-slot:testSlot>TestSlot value</template></slot-com> -->
  16.     <!-- 具名插槽，接收子传参 -->
  17.     <slot-com>
  18.       <template v-slot:testSlot="{test1, test2}">TestSlot value, params: {{ test1 }} {{ test2 }}</template>
  19.     </slot-com>
  20.   </div>
  21. </template>
  23. <script>
  24. import GrandSon from './children/GrandSon.vue'
  25. import SlotCom from './children/SlotCom.vue'
  27. export default {
  28.   name: 'ChildCom',
  29.   data() {
  30.     return {
  31.       childNum: 100,
  32.     }
  33.   },
  34.   props: ['parentNum'],
  35.   // props: {
  36.   //     parentNum: {
  37.   //         type: Number,
  38.   //         default: 0
  39.   //     }
  40.   // },
  41.   components: {
  42.     GrandSon, SlotCom
  43.   },
  44.   methods: {
  45.     // 子变量自增
  46.     addChildNum() {
  47.       this.childNum++
  48.     },
  49.     // 子改变父的自定义事件
  50.     grandSonChangeMe(n) {
  51.       this.childNum += n
  52.     }
  53.   }
  54. }
  55. </script>
  57. <style lang="scss" scoped>
  59. </style>

components/children/GrandSon.vue

  1. <template>
  2.   <div>
  3.     <h1>Grand son</h1>
  4.     <p>GrandSon - ChildCom - Parent - Demo</p>
  5.     <p>GrandSon props receive father: childNum = {{ childNum }}</p>
  6.     <p>GrandSon inject receive grandfather: parentNum = {{ parentNum }}</p>
  7.     <!-- 子传父，通过自定义方法 -->
  8.     <p>
  9.       <button @click="emitGrandSonChangeFather(10)">changeFather childNum + 10</button>
  10.       = {{ childNum }}
  11.     </p>
  12.   </div>
  13. </template>
  15. <script>
  16. export default {
  17.   name: 'GrandSon',
  18.   // 父传子 props 接收
  19.   props: ['childNum'],
  20.   // props: {
  21.   //     childNum: {
  22.   //         type: Number,
  23.   //         default: 0,
  24.   //     }
  25.   // },
  26.   // 祖传孙 inject 注入
  27.   inject: ['cParentNum'],
  28.   // inject: {
  29.   //     parentNum: {
  30.   //         type: Number,
  31.   //         default: 0
  32.   //     }
  33.   // },
  34.   computed: {
  35.     parentNum() {
  36.       return this.cParentNum()
  37.     }
  38.   },
  39.   methods: {
  40.     emitGrandSonChangeFather(n) {
  41.       this.$emit('grandSonChangeFather', n)
  42.     }
  43.   }
  44. }
  45. </script>
  47. <style lang="scss" scoped>
  49. </style>

创建插槽测试组件

components/children/SlotCom.vue

  1. <template>
  2.   <div>
  3.     <h1>Slot Com</h1>
  4.     <!-- 默认插槽 -->
  5.     <!-- <slot>Slot default</slot> -->
  6.     <!-- 具名插槽 -->
  7.     <!-- <slot name="testSlot">TestSlot default</slot> -->
  8.     <!-- 具名插槽，向父传数据 -->
  9.     <slot name="testSlot" test1="Hello" test2="vue">TestSlot default</slot>
  10.   </div>
  11. </template>
  13. <script>
  14. export default {
  15.   name: 'SlotCom',
  16. }
  17. </script>
  19. <style lang="scss" scoped>
  21. </style>

创建路由测试组件

views/Router.vue

  1. <template>
  2.   <div>
  3.     <h1>Router</h1>
  4.     <p>
  5.       <router-link :to="router">Router</router-link>
  6.     </p>
  7.     <p>
  8.       <router-link :to="query">query</router-link>
  9.     </p>
  10.     <p>query: a = {{ paramA }}, b = {{ paramB }}</p>
  11.     <p>
  12.       <button @click="changeQuery(10, 20)">query</button>
  13.     </p>
  14.     <p>change a = 10, b = 20</p>
  15.   </div>
  16. </template>
  18. <script>
  19. export default {
  20.   name: 'Router',
  21.   data() {
  22.     return {
  23.       router: {
  24.         name: 'Router',
  25.       },
  26.       query: {
  27.         path: '/router',
  28.         query: {
  29.           a: 1,
  30.           b: 2,
  31.         }
  32.       }
  33.     }
  34.   },
  35.   computed: {
  36.     paramA() {
  37.       return this.$route.query.a
  38.     },
  39.     paramB() {
  40.       return this.$route.query.b
  41.     }
  42.   },
  43.   methods: {
  44.     changeQuery(a, b) {
  45.       this.$router.push({
  46.         path: '/router',
  47.         query: {
  48.           a,
  49.           b,
  50.         }
  51.       })
  52.     }
  53.   }
  54. }
  55. </script>
  57. <style lang="scss" scoped>
  59. </style>

创建状态管理测试组件

views/State.vue

  1. <template>
  2.   <div>
  3.     <h1>State management</h1>
  4.     <p>store num: {{ num }}</p>
  5.     <p>commit mutations change state
  6.       <button @click="commitNum(10)">state.num + 10</button>
  7.     </p>
  8.     <p>dispatch actions commit change mutations change state
  9.       <button @click="dispatchNum(100)">state.num + 100</button>
  10.     </p>
  11.     <p>getters property: {{ sum }}</p>
  12.   </div>
  13. </template>
  15. <script>
  16. export default {
  17.   name: 'State',
  18.   computed: {
  19.     num() {
  20.       return this.$store.state.num
  21.     },
  22.     sum() {
  23.       return this.$store.getters.sum
  24.     }
  25.   },
  26.   methods: {
  27.     commitNum(n) {
  28.       this.$store.commit('num', n)
  29.     },
  30.     dispatchNum(n) {
  31.       this.$store.dispatch('num', n)
  32.     }
  33.   }
  34. }
  35. </script>
  37. <style lang="scss" scoped>
  39. </style>

注册路由和添加导航

router/index.js

  1. import {createRouter, createWebHistory} from 'vue-router'
  2. import Home from '../views/Home.vue'
  4. const routes = [
  5.     {
  6.         path: '/',
  7.         name: 'Home',
  8.         component: Home,
  9.         meta: {
  10.             title: 'Home - Demo'
  11.         }
  12.     },
  13.     {
  14.         path: '/about',
  15.         name: 'About',
  16.         // route level code-splitting
  17.         // this generates a separate chunk (about.[hash].js) for this route
  18.         // which is lazy-loaded when the route is visited.
  19.         component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
  20.         meta: {
  21.             title: 'About - Demo'
  22.         }
  23.     },
  24.     // 父组件
  25.     {
  26.         path: '/parent',
  27.         name: 'Parent',
  28.         component: () => import('../views/Parent.vue'),
  29.         meta: {
  30.             title: 'Parent - Demo'
  31.         },
  32.         // 子组件
  33.         children: [
  34.             {
  35.                 path: 'child-com',
  36.                 name: 'ChildCom',
  37.                 component: () => import('../components/ChildCom.vue'),
  38.                 meta: {
  39.                     title: 'ChildCom - Parent - Demo'
  40.                 },
  41.                 // 孙组件
  42.                 children: [
  43.                     {
  44.                         path: 'grand-son',
  45.                         name: 'GrandSon',
  46.                         component: () => import('../components/children/GrandSon.vue'),
  47.                         meta: {
  48.                             title: 'GrandSon - ChildCom - Parent - Demo'
  49.                         }
  50.                     },
  51.                     {
  52.                         path: 'slot-com',
  53.                         name: 'SlotCom',
  54.                         component: () => import('../components/children/SlotCom.vue'),
  55.                         meta: {
  56.                             title: 'SlotCom - ChildCom - Parent - Demo'
  57.                         }
  58.                     },
  59.                 ]
  60.             }
  61.         ]
  62.     },
  63.     // 路由测试
  64.     {
  65.         path: '/router',
  66.         name: 'Router',
  67.         component: () => import('../views/Router.vue'),
  68.         meta: {
  69.             title: 'Router - Parent - Demo'
  70.         }
  71.     },
  72.     // 状态管理测试
  73.     {
  74.         path: '/state',
  75.         name: 'State',
  76.         component: () => import('../views/State.vue'),
  77.         meta: {
  78.             title: 'State - Parent - Demo'
  79.         }
  80.     }
  81. ]
  83. const router = createRouter({
  84.     history: createWebHistory(process.env.BASE_URL),
  85.     routes
  86. })
  88. // 前置导航守卫
  89. router.beforeEach((to, from) => {
  90.     document.title = to.meta.title
  91. })
  93. export default router

添加导航 App.vue

  1. <template>
  2.   <div id="nav">
  3.     <router-link to="/">Home</router-link>
  4.     |
  5.     <router-link to="/about">About</router-link>
  6.     |
  7.     <router-link :to="{name: 'Parent'}">Parent</router-link>
  8.     |
  9.     <router-link :to="{name: 'Router'}">Router</router-link>
  10.     |
  11.     <router-link :to="{name: 'State'}">State</router-link>
  12.   </div>
  13.   <router-view/>
  14. </template>
  16. <style lang="scss">
  17. #app {
  18.   font-family: Avenir, Helvetica, Arial, sans-serif;
  19.   -webkit-font-smoothing: antialiased;
  20.   -moz-osx-font-smoothing: grayscale;
  21.   text-align: center;
  22.   color: #2c3e50;
  23. }
  25. #nav {
  26.   padding: 30px;
  28.   a {
  29.     font-weight: bold;
  30.     color: #2c3e50;
  32.     &.router-link-exact-active {
  33.       color: #42b983;
  34.     }
  35.   }
  36. }
  37. </style>

使用状态管理

store/index.js

  1. import {createStore} from 'vuex'
  3. export default createStore({
  4.     state: {
  5.         num: 100,
  6.     },
  7.     mutations: {
  8.         num(state, n) {
  9.             state.num += n
  10.         }
  11.     },
  12.     actions: {
  13.         // 解构上下文 context
  14.         num({state, commit, getters}, n) {
  15.             commit('num', n)
  16.         }
  17.     },
  18.     modules: {},
  19.     // 计算属性
  20.     getters: {
  21.         sum(state, getter) {
  22.             let sum = 0;
  23.             for (let i = 1; i <= state.num; i++) sum += i
  24.             return getter.str + sum;
  25.         },
  26.         str(state, getter) {
  27.             return `1 + 2 + ... + ${state.num} = `;
  28.         },
  29.     }
  30. })

运行测试

  1. npm run serve

  • 父子孙组件通信 - 插槽及传值

    父子孙组件通信

  • 路由测试

    路由测试

  • 状态管理和异步更新

    状态管理

使用组合 api

改写父子孙组件

  • views/Parent.vue
  1.   <template>
  2.     <div>
  3.       <h1>Parent</h1>
  4.       <p>Parent - Demo</p>
  5.       <p>
  6.         <button @click="parentNum++">ParentNum++</button>
  7.         = {{ parentNum }}
  8.       </p>
  9.       <child-com :parentNum="parentNum"></child-com>
  10.     </div>
  11.   </template>
  13.   <script>
  14.   // 自定义组件
  15.   // 1. 导入组件
  16.   import ChildCom from '../components/ChildCom.vue'
  17.   import {ref, reactive, toRefs, provide} from 'vue'
  19.   export default {
  20.     name: 'Parent',
  21.     // data() {
  22.     //     return {
  23.     //         parentNum: 10,
  24.     //     }
  25.     // },
  26.     // // 祖传孙 provide 提供（响应式）
  27.     // provide() {
  28.     //     // 传递一个引用
  29.     //     return {
  30.     //         cParentNum: this.cParentNum,
  31.     //     }
  32.     // },
  33.     // methods: {
  34.     //     cParentNum() {
  35.     //         return this.parentNum
  36.     //     }
  37.     // },
  38.     // 2. 注册组件
  39.     components: {
  40.       ChildCom,
  41.     },
  42.     // 组合 api
  43.     setup() {
  44.       // 响应式绑定
  45.       const parentNum = ref(10)
  46.       // 祖传孙 provide 提供（响应式）
  47.       provide('parentNum', parentNum)
  48.       // 使用的数据或方法返回
  49.       return {
  50.         parentNum,
  51.       }
  52.     }
  53.   }
  54.   </script>
  56.   <style lang="scss" scoped>
  58.   </style>
  • components/ChildCom.vue
  1.   <template>
  2.     <div>
  3.       <h1>Child Com</h1>
  4.       <p>ChildCom - Parent - Demo</p>
  5.       <p>ChildCom props receive father: parentNum = {{ parentNum }}</p>
  6.       <p>
  7.         <button @click="addChildNum()">childNum++</button>
  8.         = {{ childNum }}
  9.       </p>
  10.       <!-- 父接收子，通过子声明的自定义事件 -->
  11.       <grand-son :childNum="childNum" @grandSonChangeFather="grandSonChangeMe"></grand-son>
  12.       <!-- 默认插槽 -->
  13.       <!-- <slot-com>Slot value</slot-com> -->
  14.       <!-- 具名插槽，使用模板 -->
  15.       <!-- <slot-com><template v-slot:testSlot>TestSlot value</template></slot-com> -->
  16.       <!-- 具名插槽，接收子传参 -->
  17.       <slot-com>
  18.         <template v-slot:testSlot="{test1, test2}">TestSlot value, params: {{ test1 }} {{ test2 }}</template>
  19.       </slot-com>
  20.     </div>
  21.   </template>
  23.   <script>
  24.   import GrandSon from './children/GrandSon.vue'
  25.   import SlotCom from './children/SlotCom.vue'
  26.   import {ref, reactive, toRefs} from 'vue'
  28.   export default {
  29.     name: 'ChildCom',
  30.     // data() {
  31.     //     return {
  32.     //         childNum: 100,
  33.     //     }
  34.     // },
  35.     props: ['parentNum'],
  36.     // props: {
  37.     //     parentNum: {
  38.     //         type: Number,
  39.     //         default: 0
  40.     //     }
  41.     // },
  42.     components: {
  43.       GrandSon, SlotCom
  44.     },
  45.     // methods: {
  46.     //     // 子改变父的自定义事件
  47.     //     grandSonChangeMe(n) {
  48.     //         this.childNum += n;
  49.     //     }
  50.     // }
  51.     // 组合 api
  52.     setup() {
  53.       const data = reactive({
  54.         childNum: 100,
  55.       })
  56.       // 子变量自增
  57.       const addChildNum = () => data.childNum++
  58.       // 子改变父的自定义事件
  59.       const grandSonChangeMe = n => data.childNum += n
  60.       // 使用的数据或方法返回
  61.       return {
  62.         ...toRefs(data), addChildNum, grandSonChangeMe
  63.       }
  64.     }
  65.   }
  66.   </script>
  68.   <style lang="scss" scoped>
  70.   </style>
  • components/children/GrandSon.vue
  1.   <template>
  2.     <div>
  3.       <h1>Grand son</h1>
  4.       <p>GrandSon - ChildCom - Parent - Demo</p>
  5.       <p>GrandSon props receive father: childNum = {{ childNum }}</p>
  6.       <p>GrandSon inject receive grandfather: parentNum = {{ parentNum }}</p>
  7.       <!-- 子传父，通过自定义方法 -->
  8.       <p>
  9.         <button @click="emitGrandSonChangeFather(10)">changeFather childNum + 10</button>
  10.         = {{ childNum }}
  11.       </p>
  12.     </div>
  13.   </template>
  15.   <script>
  16.   import {ref, reactive, toRefs, inject} from 'vue'
  18.   export default {
  19.     name: 'GrandSon',
  20.     // 父传子 props 接收
  21.     props: ['childNum'],
  22.     // props: {
  23.     //     childNum: {
  24.     //         type: Number,
  25.     //         default: 0,
  26.     //     }
  27.     // },
  28.     // 祖传孙 inject 注入
  29.     // inject: ['cParentNum'],
  30.     // inject: {
  31.     //     parentNum: {
  32.     //         type: Number,
  33.     //         default: 0
  34.     //     }
  35.     // },
  36.     // computed: {
  37.     //     parentNum() {
  38.     //         return this.cParentNum()
  39.     //     }
  40.     // },
  41.     // 组合 api
  42.     setup(props, {emit}) {
  43.       let parentNum = inject('parentNum')
  44.       const emitGrandSonChangeFather = n => emit('grandSonChangeFather', n)
  45.       return {
  46.         parentNum,
  47.         emitGrandSonChangeFather
  48.       }
  49.     }
  50.   }
  51.   </script>
  53.   <style lang="scss" scoped>
  55.   </style>

改写路由

  • views/Router.vue
  1.   <template>
  2.     <div>
  3.       <h1>Router</h1>
  4.       <p>
  5.         <router-link :to="router">Router</router-link>
  6.       </p>
  7.       <p>
  8.         <router-link :to="query">query</router-link>
  9.       </p>
  10.       <p>query: a = {{ paramA }}, b = {{ paramB }}</p>
  11.       <p>
  12.         <button @click="changeQuery(10, 20)">query</button>
  13.       </p>
  14.       <p>change a = 10, b = 20</p>
  15.     </div>
  16.   </template>
  18.   <script>
  19.   import {useRoute, useRouter} from 'vue-router'
  20.   import {ref, reactive, toRefs, computed} from 'vue'
  22.   export default {
  23.     name: 'Router',
  24.     // data() {
  25.     //     return {
  26.     //         router: {
  27.     //             name: 'Router',
  28.     //         },
  29.     //         query: {
  30.     //             path: '/router',
  31.     //             query: {
  32.     //                 a: 1,
  33.     //                 b: 2,
  34.     //             }
  35.     //         }
  36.     //     }
  37.     // },
  38.     // computed: {
  39.     //     paramA() {
  40.     //         return this.$route.query.a
  41.     //     },
  42.     //     paramB() {
  43.     //         return this.$route.query.b
  44.     //     }
  45.     // },
  46.     // methods: {
  47.     //     changeQuery(a, b) {
  48.     //         this.$router.push({
  49.     //             path: '/router',
  50.     //             query: {
  51.     //                 a,
  52.     //                 b,
  53.     //             }
  54.     //         })
  55.     //     }
  56.     // }
  57.     setup() {
  58.       const route = useRoute()
  59.       const router = useRouter()
  61.       const data = reactive({
  62.         router: {
  63.           name: 'Router',
  64.         },
  65.         query: {
  66.           path: '/router',
  67.           query: {
  68.             a: 1,
  69.             b: 2,
  70.           }
  71.         },
  72.       })
  74.       const paramA = computed(() => route.query.a),
  75.           paramB = computed(() => route.query.b),
  76.           changeQuery = (a, b) => router.push({
  77.             path: '/router',
  78.             query: {
  79.               a,
  80.               b,
  81.             }
  82.           })
  84.       return {
  85.         ...toRefs(data),
  86.         paramA,
  87.         paramB,
  88.         changeQuery,
  89.       }
  90.     }
  91.   }
  92.   </script>
  94.   <style lang="scss" scoped>
  96.   </style>

改写状态管理

  • views/State.vue
  1.   <template>
  2.     <div>
  3.       <h1>State management</h1>
  4.       <p>store num: {{ num }}</p>
  5.       <p>commit mutations change state
  6.         <button @click="commitNum(10)">state.num + 10</button>
  7.       </p>
  8.       <p>dispatch actions commit change mutations change state
  9.         <button @click="dispatchNum(100)">state.num + 100</button>
  10.       </p>
  11.       <p>getters property: {{ sum }}</p>
  12.     </div>
  13.   </template>
  15.   <script>
  16.   // 状态管理
  17.   import {useStore} from 'vuex'
  18.   import {computed} from 'vue'
  20.   export default {
  21.     name: 'State',
  22.     // computed: {
  23.     //     num() {
  24.     //         return this.$store.state.num
  25.     //     },
  26.     //     sum() {
  27.     //         return this.$store.getters.sum
  28.     //     }
  29.     // },
  30.     // methods: {
  31.     //     commitNum(n) {
  32.     //         this.$store.commit('num', n)
  33.     //     },
  34.     //     dispatchNum(n) {
  35.     //         this.$store.dispatch('num', n)
  36.     //     }
  37.     // }
  38.     setup() {
  39.       const store = useStore()
  40.       const num = computed(() => store.state.num),
  41.           sum = computed(() => store.getters.sum),
  42.           commitNum = n => store.commit('num', n),
  43.           dispatchNum = n => store.dispatch('num', n)
  45.       return {
  46.         num,
  47.         sum,
  48.         commitNum,
  49.         dispatchNum,
  50.       }
  51.     }
  52.   }
  53.   </script>
  55.   <style lang="scss" scoped>
  57.   </style>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行