>[success] # 进阶篇 ~~~ 1.上个章节对基础进行了配置，这个章节将进行扩展，配置插槽 ~~~ >[danger] ##### 配置插槽 ~~~ 1.插槽章节讲过，想在组件中插入我们预留的dom，可以使用插槽，为了让， 组件可以，配置自己想要的名字代码如下 ~~~ * 在组件中template 写法，定义了一个title的插槽 ~~~ <template> <div> <slot name="title"></slot> <span :id="eleId"></span> </div> </template> ~~~ * 使用 ~~~ <template> <div> <count-to :endVal="100" :duration="300"> <h1 slot="title">标题插槽：</h1> </count-to> </div> </template> ~~~ >[danger] ##### 自定义class ~~~ 1.在组件定义一个接受值这里定义的是countClass，把countClass 绑定到 计算属性中其中'count-to-number' 是我们定义的前缀，'this.className'是 我们从父组件接受的cllass 名称 2.根据上面分析后分别在组件的计算属性定义一个叫'countClass' 和一个接 收父组件的props值'className' 3.使用的时候在父组件定义好className属性要接受的值 ~~~ ~~~ <template> <div> <span :class="countClass" :id="eleId"></span> </div> </template> <script> import Countup from 'countup' export default { computed:{ countClass(){ return ['count-to-number',this.className] }, }, props:{ /* * @description 配置class 类名 * */ className:{ type:String, default:'', }, } </script> ~~~ >[danger] ##### 获取组件中的某个方法$ref ~~~ 1.下面演示的 是父组件调用子组件的一种方法 ~~~ * 在组件中标签绑定一个ref 用来获取当前的dom节点，在创建一个方 法'getCount'等待父组件去调用 ~~~ <template> <div> <span ref="refcount" :class="countClass" :id="eleId"></span> </div> </template> methods:{ // 通过dom 获取span上的数值 getCount(){ return this.$refs.refcount.innerHTML } }, ~~~ * 在父组件中调用的时候，给调用的子组件绑定ref，这样父组件就可以通过ref获取子组件的所用内容 ~~~ <template> <div> <count-to ref="parentcount" :endVal="100" :duration="300" className="fontcolor"> <h1 slot="title">标题插槽：</h1> </count-to> <button @click="getValue"> 触发</button> </div> </template> methods:{ getValue(){ // 触发组件中的 getCount 方法 console.log(this.$refs.parentcount.getCount()) } } } ~~~ >[danger] ##### 触发插件中一些事件 ~~~ 1.countup 插件有一个方法 update 调用后会重新更新，动态变化的数值 2.这个更新的方法可以放到watch 监听中去，监听我们的endVal 是否发生 变化，如果发生变化说明需要重新启动我们的监听 ~~~ * 在组件中watch 中是哪个增加一个监听事件 ~~~ watch:{ // 监听 父组件传递过来的endVal 是否发生变化 endVal(newVal, oldVal){ this.counter.update(newVal) } }, ~~~