search

博客列表 >认识组件库

认识组件库

初见
初见原创
2021年11月04日 19:43:55762浏览

Vue的组件化开发

  • 组件化是Vue的精髓，Vue开发就是由一个一个的组件构成的。
  • 组件的分类：
    页面级组件
    业务上可复用的基础组件
    与业务无关的独立功能组件
  • 组件开发三要素（prop,自定义事件,slot）
    prop用于定义组件的属性。
    自定义事件用于触发组件的事件。
    slot用于组件功能的扩展。
  • 组件设计需要考虑的问题
    可扩展性强
    组件中方法函数的抽离，便于复用，适用程度高。
    文档清楚详细
    颗粒度合适，适度抽象
    功能尽可能单一，代码行数适中

样式 lang(scss) scoped(局域)

  1. Index.vue
  2. <template>
  3. <div>
  4. Index 根组件
  5.   <hr>
  6. <!--  <MyBut></MyBut>-->
  7.   <my-but></my-but>
  8.   <hr>
  9.   <sub-btn></sub-btn>
  10. </div>
  11. </template>
  12. <script>
  13. import MyBut from "./components/MyBut";
  14. import SubBtn from "./components/SubBtn";
  15. export default {
  16.   name:'Index',
  17.   components:{
  18.     MyBut,
  19.     SubBtn
  20.   },
  21.   data(){
  23.   },
  25.   methods:{
  27.   }
  29. }
  30. </script>
  31. <style scoped>
  32. </style>
  34. MyBut.vue
  35. <template>
  36. <div>
  37. MyBut子组件<hr>
  38.   <div class="but">
  39.   <sub-btn></sub-btn>
  40.   </div>
  41. </div>
  42. </template>
  44. <script>
  45. import SubBtn from "./SubBtn";
  46. export default {
  47.   name: "MyBut",
  48.   components:{
  49.     SubBtn
  50.   }
  51. }
  52. </script>
  54. <style scoped lang="scss">
  55. .but{
  56.   width: 80px;
  57.   height: 30px;
  58.   line-height: 30px;
  59.   box-shadow: 0px 3px 5px #666;
  60.   text-align: center;
  61.   background: coral;
  62.   color: aliceblue;
  63.   :hover{
  64.     cursor: pointer;
  65.     background: brown;
  66.   }
  67. }
  68. </style>
  70. SubBtn.vue
  71. <template>
  72. <div class="but">
  73.   确定
  74. </div>
  75. </template>
  77. <script>
  78. export default {
  79.   name: "SubBtn"
  80. }
  81. </script>
  83. <style scoped>
  85. </style>

vue

  • Vue父子组件之间的通信

父传子

  1. 父
  2. <template>
  3. <div>
  5.   <my-but one="hello" two="world" ></my-but>
  6.   <hr>
  7.   <my-but :one="msg" :two="user" :three="obj"></my-but>
  8. </div>
  9. </template>
  11. <script>
  12. import MyBut from "./components/MyBut";
  13. import SubBtn from "./components/SubBtn";
  14. export default {
  15.   name:'Index',
  16.   components:{
  17.     MyBut,
  18.     SubBtn
  19.   },
  20.   data(){
  21.     return{
  22.       msg:'this msg',
  23.       user:['aaa','bbb','ccc'],
  24.       obj:{
  25.         name:'xiaoming',
  26.         age:30
  27.       }
  28.     }
  29.   },
  31.   methods:{
  33.   }
  35. }
  36. </script>
  37. 子
  38. <template>
  39. <div>
  41.   <div class="but">
  42.     {{one}} --
  43.     <span v-for="item in two" :key="item">{{item}}</span>
  46.   </div>
  47.   {{three.name}}
  48. </div>
  49. </template>
  51. <script>
  52. import SubBtn from "./SubBtn";
  53. export default {
  54.   name: "MyBut",
  55.   // props:[
  56.   //     'one','two'
  57.   // ],
  58.   props:{
  59.     one:{
  60.       type:String,
  61.       require:true
  62.     },
  63.     two:{
  64.       type:Array,
  65.     },
  66.     three:{
  67.       type:Object,
  68.       default:{
  69.         name:'xiaohua',
  70.         age:11
  71.       }
  72.     }
  73.   },
  74.   components:{
  75.     SubBtn
  76.   }
  77. }
  78. </script>
  80. <style scoped lang="scss">
  81. .but{
  82.   width: 180px;
  83.   height: 180px;
  84.   line-height: 30px;
  85.   box-shadow: 0px 3px 5px #666;
  86.   text-align: center;
  87.   background: coral;
  88.   color: aliceblue;
  89.   :hover{
  90.     cursor: pointer;
  91.     background: brown;
  92.   }
  93. }
  95. </style>

父传子

子传父
子传父通过事件

  1. 父
  2. <template>
  3. <div>
  5.  <sunny @mynum="fun3"></sunny>
  6.   {{count}}
  7. </div>
  8. </template>
  10. <script>
  11. import MyBut from "./components/MyBut";
  12. import SubBtn from "./components/SubBtn";
  13. import Sunny from "./components/Sunny";
  14. export default {
  15.   name:'Index',
  16.   components:{
  17.     MyBut,
  18.     SubBtn,
  19.     Sunny
  20.   },
  21.   data(){
  22.     return{
  23.       msg:'this msg',
  24.       count:0,
  25.       user:['aaa','bbb','ccc'],
  26.       obj:{
  27.         name:'xiaoming',
  28.         age:30
  29.       }
  30.     }
  31.   },
  33.   methods:{
  34.     fun3(num){
  35.       console.log('我是父组件')
  36.       console.log(num)
  37.       this.count +=num
  38.     }
  39.   }
  40. }
  41. </script>
  42. <style scoped>
  43. </style>
  45. 子
  46. <template>
  47. <div>
  48.   <div @click="numchange(2)" class="but"></div>
  49. </div>
  50. </template>
  52. <script>
  53. export default {
  54.   name: "Sunny",
  55.   data(){
  56.     return{
  57.       num:0
  58.     }
  59.   },
  60.   methods:{
  61.     numchange(num){
  62.       console.log('我是子组件');
  63.       this.$emit('mynum',num)
  64.     }
  65.   }
  66. }
  67. </script>
  69. <style scoped lang="scss">
  70. .but{
  71.   width: 180px;
  72.   height: 180px;
  73.   line-height: 30px;
  74.   box-shadow: 0px 3px 5px #666;
  75.   text-align: center;
  76.   background: coral;
  77.   color: aliceblue;
  78. :hover{
  79.   cursor: pointer;
  80.   background: brown;
  81. }
  82. }
  83. </style>

子传父

  • Vue父子组件之间的访问方式

子组件调用父组件的方法：$parent或$root
父组件调用子组件的方法:$children或 $refs

  1. 子访问父
  2. this.$parent.changen(); //调用父的方法
  3. this.$parent.count; //调用父的属性
  4. this.$parent.$parent.msg; //调用父的父成员
  5. this.$root.appmet(); //调用根的成员
  7. 父访问子
  8.  console.log('这是父组件中的two方法')
  9.     this.$refs.aaa.changeone(); //调用别名为aaa的子组件方法
  10.     this.$refs.bbb.changeone(); //调用别名为bbb的子组件方法
  12.     console.log(this.$refs.aaa.num) //访问子组件成员
  13.     console.log(this.$refs.bbb.num) //访问子组件成员
  15. 父
  16. <div @click="fun5">点击</div>
  17.  <sunny ref="aaa"></sunny>
  18. fun5(){
  20.       this.$refs.aaa.sun();
  22.       console.log(this.$refs.aaa.test)
  23.     }
  24. 子
  25. data(){
  26.     return{
  27.       num:0,
  28.       test:'test111'
  29.     }
  30.   }
  31.    sun(){
  32.       console.log('子组件测试')
  33.     }

父调用子

  • 插槽slot
  1. 父
  2. <template>
  3. <div>
  5. <my-slot>
  6.   <template v-slot:default>
  7.     <button>OK</button>
  8.   </template>
  10.   <template v-slot:one>
  11.     <button> 确定</button>
  12.   </template>
  13.   <!-- v-slot == # -->
  14.   <template #two="myuser">
  15.     <button> {{ myuser.user.name }}</button>
  16.   </template>
  17. </my-slot>
  18.   <br>
  19.   <my-slot>
  20.     <a href="">删除</a>
  21.   </my-slot>
  22.   <br>
  23.   <my-slot>
  24. <span>aaaa</span>
  25. </my-slot>
  26.   <br>
  27. </div>
  28. </template>
  30. <script>
  31. import MyBut from "./components/MyBut";
  32. import SubBtn from "./components/SubBtn";
  33. import Sunny from "./components/Sunny";
  34. import MySlot from "./components/MySlot";
  35. export default {
  36.   name:'Index',
  37.   components:{
  38.     MyBut,
  39.     SubBtn,
  40.     Sunny,
  41.     MySlot
  42.   },
  43.   data(){
  44.     return{
  45.       msg:'this msg',
  46.       count:0,
  47.       user:['aaa','bbb','ccc'],
  48.       obj:{
  49.         name:'xiaoming',
  50.         age:30
  51.       }
  52.     }
  53.   },
  55.   methods:{
  56.     fun3(num){
  57.       console.log('我是父组件')
  58.       console.log(num)
  59.       this.count +=num
  60.     },
  61.     fun(){
  62.       console.log('我是fun')
  63.     },
  64.     fun5(){
  66.       this.$refs.aaa.sun();
  68.       console.log(this.$refs.aaa.test)
  69.     }
  70.       }
  72. }
  73. </script>
  75. <style scoped>
  77. </style>
  79. 子
  80. <template>
  81. <div>
  82.   <slot></slot>
  83.   <br>
  84.   this slot
  85.   <br>
  86.   <!-- 声明具名插槽 -->
  87.   <slot name="one" :user="user"></slot>
  88.   <br>
  89.   <slot name="two" :user="user"></slot>
  90. </div>
  91. </template>
  93. <script>
  94. export default {
  95.   name: "MySlot",
  96.   data(){
  97.     return{
  98.       user:{name:'xiaoming',age:30}
  99.     }
  100.   }
  101. }
  102. </script>
  104. <style scoped>
  106. </style>

插槽

  • Vue3中组件的生命周期函数

生命周期函数

  1. 父
  2. <button @click="show=!show">销毁</button>
  3.   <hr>
  4. <!--  销毁-->
  5.   <xiao-hui v-if="show"></xiao-hui>
  7.   <hr>
  8. <!--  隐藏-->
  9.   <xiao-hui v-show="show"></xiao-hui>
  10.   <br>
  11. <!--  保持生命-->
  12.   <keep-alive>
  13.     <xiao-hui v-if="show"></xiao-hui>
  14.   </keep-alive>
  16. show:true,
  18. 子
  19. <button @click="num++">{{num}} ++</button>
  20. beforeCreate() {
  21.     console.log('1、在创建组件之前')
  22.   },
  23.   created() {
  24.     console.log('2、组件已经创建完成')
  25.   },
  26.   beforeMount() {
  27.     console.log('3、在模板挂载之前')
  28.   },
  29.   mounted() {
  30.     console.log('4、在模板挂载完成之后')
  31.   },
  32.   beforeUpdate() {
  33.     console.log('5、在内容有改变之前')
  34.   },
  35.   updated() {
  36.     console.log('6、在数据改变之后')
  37.   },
  38.   beforeUnmount() {
  39.     console.log('7、在组件销毁之前')
  40.   },
  41.   unmounted() {
  42.     console.log('8、在组件销毁之后')
  43.   },
  44.   activated() {
  45.     console.log('9、被 keep-alive 缓存的组件激活时调用')
  46.   },
  47.   deactivated() {
  48.     console.log('10、被 keep-alive 缓存的组件失活时调用')
  49.   },
  50.   data(){
  51.     return{
  52.       num:0
  53.     }

生命周期

  • Element-UI/ElementPlus组件库
  1. <template>
  2.   <div class="block">
  3.     <el-timeline>
  4.       <el-timeline-item
  5.           v-for="(activity, index) in activities"
  6.           :key="index"
  7.           :icon="activity.icon"
  8.           :type="activity.type"
  9.           :color="activity.color"
  10.           :size="activity.size"
  11.           :hollow="activity.hollow"
  12.           :timestamp="activity.timestamp"
  13.       >
  14.         {{ activity.content }}
  15.       </el-timeline-item>
  16.     </el-timeline>
  17.   </div>
  18. </template>
  20. <script>
  21. import {ElTimeline, ElTimelineItem} from 'element-plus';
  22. import 'element-plus/dist/index.css';
  23. import { MoreFilled } from '@element-plus/icons';
  24. export default {
  25.   name: "Ele",
  26.   components:{
  27.     ElTimeline,
  28.     ElTimelineItem
  29.   },
  30.   data() {
  31.     return {
  32.       activities: [
  33.         {
  34.           content: 'Custom icon',
  35.           timestamp: '2018-04-12 20:46',
  36.           size: 'large',
  37.           type: 'primary',
  38.           icon: MoreFilled,
  39.         },
  40.         {
  41.           content: 'Custom color',
  42.           timestamp: '2018-04-03 20:46',
  43.           color: '#0bbd87',
  44.         },
  45.         {
  46.           content: 'Custom size',
  47.           timestamp: '2018-04-03 20:46',
  48.           size: 'large',
  49.         },
  50.         {
  51.           content: 'Custom hollow',
  52.           timestamp: '2018-04-03 20:46',
  53.           type: 'primary',
  54.           hollow: true,
  55.         },
  56.         {
  57.           content: 'Default node',
  58.           timestamp: '2018-04-03 20:46',
  59.         },
  60.       ],
  61.     }
  62.   },
  63. }
  64. </script>
  66. <style scoped>
  68. </style>
上一条：mysql新增纪录中某设有默认值的字段为null下一条：Docker——它是真正的未来
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多