2021/2/1 深入理解组件传值（countup插件实现）

父组件给子组件传值。

countup实现

<template>
  <div>
    <!-- 定义绑定id -->
    <!-- slot为插槽可以给组件添加指定信息 -->
    <!-- ref可以获取当前页面也可以获取页面中的dom节点 -->
   <slot name="left"></slot><span :id="eleId" ref="number"></span><slot name="right"></slot>
  </div>
</template>

<script>
/**npm install countup --save 导入后引入 */
import Countup from 'countup'
export default {
  props : {
    /*开始数值*/
    startValue:{
      type:Number,
      default:0,
    },
    /*最终值 required：true必须传入值*/
    endValue:{
      type:Number,
      required: true,

    },
    /*小数后几位*/
    decimals:{
      type:Number,
      default:0,
    },
    /**渐变时长 */
    duration:{
      type:Number,
      default:1,
    },
    /**快慢变化，ture是有，fales均匀变化 */
    useEasing:{
      type:Boolean,
      default:true,
    },
    /** 分组信息*/
    useGrouping:{
       type:Boolean,
      default:true,
    },
    /**整数分隔符 */
    separator:{
      type:String,
      default:",",
    },
    /**小数分隔符 */
    decimal:{
      type:String,
      default:".",
    },
    /**延迟时间 */
    delay:{
      type:Number,
      default:0,

    }





  },
  data() {
    return {
      /**实例一个空的属性对象 */
      props:{},
      /**实例一个空的对象 */
      demo:{},

    }
  },
  computed:{
    eleId(){
      /**获取事件id 绑定每一个页面，_uid方法能够获取到独一无二的页面id */
      return `countup_${this._uid}`
    }

  },
  /**监听器 监听endValue的变化*/
  watch:{
    endValue(newvalue,oldvalue){

      /**countup组件的新值更新方法 */
      this.demo.update(newvalue)
      this.printEndValue()
    }
  },
  methods: {
    /**this.$refs.number获取的是number的dom节点，innerText是节点中的文本信息 */
    getCount(){
      console.log(this.$refs.number.innerText)
      return this.$refs.number.innerText
    },
    printEndValue(){
       setTimeout(()=>{
         /**提交一个事件,参数名第一个是时间名,第二个为数据对象 */
        this.$emit("on-countup-end",Number(this.getCount()))

      },this.duration * 1000)
    }


  },
  //**生命周期钩子，组件渲染结束后 */
  mounted() {
    /**当所有组件全部加载结束 */
    this.$nextTick(()=>{
      /**参数类型，第一个是事件id，起始值，最终值，小数后几位，动画时长，options对象
       * {快慢变化，分组信息，整数分割符，小数分隔符}
       */
       this.demo = new Countup(this.eleId,this.startValue,this.endValue,
                  this.decimals,this.duration,{
                    useEasing:this.useEasing,
                    useGrouping:this.useGrouping,
                    separator:this.separator,
                    decimal:this.decimal,
                  })
    })
    /**延迟加载计时器 */
    setTimeout(()=>{
      this.demo.start() /**对象加载方法 */
    },this.delay)

  },
}
</script>

父组件信息

<template>
  <div>
    <a-input style="width:200px" v-model="username"><a-icon slot="prefix" type="user"/></a-input>
    <a-input-password  style="width:200px" v-model="password"><a-icon slot="prefix" type="key"/></a-input-password>
    <a-button @click="login()">登录</a-button>
    <a-button @click="getdata()">请求</a-button>
    <ul>
      <li v-for="(item,key) in data">
        {{item}}
      </li>
    </ul>

    <!-- 绑定ref countup -->
    <!-- 传入endvalue 命名方式 end-value 子组件命名驼峰命名 获取抛出事件  -->
    <v-count  ref="countup" :end-value="endval" @on-countup-end="handleEnd">
      <!-- slot插槽信息 -->
      <span slot="left">总金额</span>
      <span slot="right">元</span>
    </v-count>
    <a-button @click="getCountup">打印多少钱</a-button>
    <a-button @click="updateCountup">更新多少钱</a-button>
  </div>
</template>

<script>
import store from '../store/store.js'
import Countup from '../components/Countup/Countup'

export default {

  data() {
    return {
      username:"",
      password:"",
      data:"",
      endval:100,




    }
  },store,
  methods: {
    login(){
      this.$store.state.username = this.username;
      this.$router.push({path:'/index'})
    },
    getdata(){
      this.$http.post('/data/index2').then((response)=>{
        console.log(response)
        this.data = response.body
      },(err) =>{
        console.log(err)
      })
    },
    getCountup(){
      /*获取子组件页面信息中dom信息的*/
      this.$refs.countup.getCount()
    },
    updateCountup(){
      /**变更 转递的 endvalue值 */
      this.endval += Math.random() *100
    },
    handleEnd(endvalue){
      /*当变更结束后 监听抛出事件*/
      console.log("-->"+endvalue)

    }
  },
  components:{
    "v-count": Countup,
  }

}
</script>