>[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) } }, ~~~