认识组件库

Vue的组件化开发

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

样式 lang(scss) scoped(局域)

Index.vue
<template>
<div>
Index 根组件
  <hr>
<!--  <MyBut></MyBut>-->
  <my-but></my-but>
  <hr>
  <sub-btn></sub-btn>
</div>
</template>
<script>
import MyBut from "./components/MyBut";
import SubBtn from "./components/SubBtn";
export default {
  name:'Index',
  components:{
    MyBut,
    SubBtn
  },
  data(){
  },
  methods:{
  }
}
</script>
<style scoped>
</style>
MyBut.vue
<template>
<div>
MyBut子组件<hr>
  <div class="but">
  <sub-btn></sub-btn>
  </div>
</div>
</template>
<script>
import SubBtn from "./SubBtn";
export default {
  name: "MyBut",
  components:{
    SubBtn
  }
}
</script>
<style scoped lang="scss">
.but{
  width: 80px;
  height: 30px;
  line-height: 30px;
  box-shadow: 0px 3px 5px #666;
  text-align: center;
  background: coral;
  color: aliceblue;
  :hover{
    cursor: pointer;
    background: brown;
  }
}
</style>
SubBtn.vue
<template>
<div class="but">
  确定
</div>
</template>
<script>
export default {
  name: "SubBtn"
}
</script>
<style scoped>
</style>

• Vue父子组件之间的通信

父传子

父
<template>
<div>
  <my-but one="hello" two="world" ></my-but>
  <hr>
  <my-but :one="msg" :two="user" :three="obj"></my-but>
</div>
</template>
<script>
import MyBut from "./components/MyBut";
import SubBtn from "./components/SubBtn";
export default {
  name:'Index',
  components:{
    MyBut,
    SubBtn
  },
  data(){
    return{
      msg:'this msg',
      user:['aaa','bbb','ccc'],
      obj:{
        name:'xiaoming',
        age:30
      }
    }
  },
  methods:{
  }
}
</script>
子
<template>
<div>
  <div class="but">
    {{one}} --
    <span v-for="item in two" :key="item">{{item}}</span>
  </div>
  {{three.name}}
</div>
</template>
<script>
import SubBtn from "./SubBtn";
export default {
  name: "MyBut",
  // props:[
  //     'one','two'
  // ],
  props:{
    one:{
      type:String,
      require:true
    },
    two:{
      type:Array,
    },
    three:{
      type:Object,
      default:{
        name:'xiaohua',
        age:11
      }
    }
  },
  components:{
    SubBtn
  }
}
</script>
<style scoped lang="scss">
.but{
  width: 180px;
  height: 180px;
  line-height: 30px;
  box-shadow: 0px 3px 5px #666;
  text-align: center;
  background: coral;
  color: aliceblue;
  :hover{
    cursor: pointer;
    background: brown;
  }
}
</style>

子传父
子传父通过事件

父
<template>
<div>
 <sunny @mynum="fun3"></sunny>
  {{count}}
</div>
</template>
<script>
import MyBut from "./components/MyBut";
import SubBtn from "./components/SubBtn";
import Sunny from "./components/Sunny";
export default {
  name:'Index',
  components:{
    MyBut,
    SubBtn,
    Sunny
  },
  data(){
    return{
      msg:'this msg',
      count:0,
      user:['aaa','bbb','ccc'],
      obj:{
        name:'xiaoming',
        age:30
      }
    }
  },
  methods:{
    fun3(num){
      console.log('我是父组件')
      console.log(num)
      this.count +=num
    }
  }
}
</script>
<style scoped>
</style>
子
<template>
<div>
  <div @click="numchange(2)" class="but"></div>
</div>
</template>
<script>
export default {
  name: "Sunny",
  data(){
    return{
      num:0
    }
  },
  methods:{
    numchange(num){
      console.log('我是子组件');
      this.$emit('mynum',num)
    }
  }
}
</script>
<style scoped lang="scss">
.but{
  width: 180px;
  height: 180px;
  line-height: 30px;
  box-shadow: 0px 3px 5px #666;
  text-align: center;
  background: coral;
  color: aliceblue;
:hover{
  cursor: pointer;
  background: brown;
}
}
</style>

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

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

子访问父
this.$parent.changen(); //调用父的方法
this.$parent.count; //调用父的属性
this.$parent.$parent.msg; //调用父的父成员
this.$root.appmet(); //调用根的成员
父访问子
 console.log('这是父组件中的two方法')
    this.$refs.aaa.changeone(); //调用别名为aaa的子组件方法
    this.$refs.bbb.changeone(); //调用别名为bbb的子组件方法
    console.log(this.$refs.aaa.num) //访问子组件成员
    console.log(this.$refs.bbb.num) //访问子组件成员
父
<div @click="fun5">点击</div>
 <sunny ref="aaa"></sunny>
fun5(){
      this.$refs.aaa.sun();
      console.log(this.$refs.aaa.test)
    }
子
data(){
    return{
      num:0,
      test:'test111'
    }
  }
   sun(){
      console.log('子组件测试')
    }

• 插槽slot

父
<template>
<div>
<my-slot>
  <template v-slot:default>
    <button>OK</button>
  </template>
  <template v-slot:one>
    <button> 确定</button>
  </template>
  <!-- v-slot == # -->
  <template #two="myuser">
    <button> {{ myuser.user.name }}</button>
  </template>
</my-slot>
  <br>
  <my-slot>
    <a href="">删除</a>
  </my-slot>
  <br>
  <my-slot>
<span>aaaa</span>
</my-slot>
  <br>
</div>
</template>
<script>
import MyBut from "./components/MyBut";
import SubBtn from "./components/SubBtn";
import Sunny from "./components/Sunny";
import MySlot from "./components/MySlot";
export default {
  name:'Index',
  components:{
    MyBut,
    SubBtn,
    Sunny,
    MySlot
  },
  data(){
    return{
      msg:'this msg',
      count:0,
      user:['aaa','bbb','ccc'],
      obj:{
        name:'xiaoming',
        age:30
      }
    }
  },
  methods:{
    fun3(num){
      console.log('我是父组件')
      console.log(num)
      this.count +=num
    },
    fun(){
      console.log('我是fun')
    },
    fun5(){
      this.$refs.aaa.sun();
      console.log(this.$refs.aaa.test)
    }
      }
}
</script>
<style scoped>
</style>
子
<template>
<div>
  <slot></slot>
  <br>
  this slot
  <br>
  <!-- 声明具名插槽 -->
  <slot name="one" :user="user"></slot>
  <br>
  <slot name="two" :user="user"></slot>
</div>
</template>
<script>
export default {
  name: "MySlot",
  data(){
    return{
      user:{name:'xiaoming',age:30}
    }
  }
}
</script>
<style scoped>
</style>

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

父
<button @click="show=!show">销毁</button>
  <hr>
<!--  销毁-->
  <xiao-hui v-if="show"></xiao-hui>
  <hr>
<!--  隐藏-->
  <xiao-hui v-show="show"></xiao-hui>
  <br>
<!--  保持生命-->
  <keep-alive>
    <xiao-hui v-if="show"></xiao-hui>
  </keep-alive>
show:true,
子
<button @click="num++">{{num}} ++</button>
beforeCreate() {
    console.log('1、在创建组件之前')
  },
  created() {
    console.log('2、组件已经创建完成')
  },
  beforeMount() {
    console.log('3、在模板挂载之前')
  },
  mounted() {
    console.log('4、在模板挂载完成之后')
  },
  beforeUpdate() {
    console.log('5、在内容有改变之前')
  },
  updated() {
    console.log('6、在数据改变之后')
  },
  beforeUnmount() {
    console.log('7、在组件销毁之前')
  },
  unmounted() {
    console.log('8、在组件销毁之后')
  },
  activated() {
    console.log('9、被 keep-alive 缓存的组件激活时调用')
  },
  deactivated() {
    console.log('10、被 keep-alive 缓存的组件失活时调用')
  },
  data(){
    return{
      num:0
    }

• Element-UI/ElementPlus组件库

<template>
  <div class="block">
    <el-timeline>
      <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :icon="activity.icon"
          :type="activity.type"
          :color="activity.color"
          :size="activity.size"
          :hollow="activity.hollow"
          :timestamp="activity.timestamp"
      >
        {{ activity.content }}
      </el-timeline-item>
    </el-timeline>
  </div>
</template>
<script>
import {ElTimeline, ElTimelineItem} from 'element-plus';
import 'element-plus/dist/index.css';
import { MoreFilled } from '@element-plus/icons';
export default {
  name: "Ele",
  components:{
    ElTimeline,
    ElTimelineItem
  },
  data() {
    return {
      activities: [
        {
          content: 'Custom icon',
          timestamp: '2018-04-12 20:46',
          size: 'large',
          type: 'primary',
          icon: MoreFilled,
        },
        {
          content: 'Custom color',
          timestamp: '2018-04-03 20:46',
          color: '#0bbd87',
        },
        {
          content: 'Custom size',
          timestamp: '2018-04-03 20:46',
          size: 'large',
        },
        {
          content: 'Custom hollow',
          timestamp: '2018-04-03 20:46',
          type: 'primary',
          hollow: true,
        },
        {
          content: 'Default node',
          timestamp: '2018-04-03 20:46',
        },
      ],
    }
  },
}
</script>
<style scoped>
</style>