chore(Tab): optimize implementation of title slot (#4974)

src/tabs/Title.js

@@ -1,8 +1,8 @@
 import { createNamespace } from '../utils';
 
-const bem = createNamespace('tab')[1];
+const [createComponent, bem] = createNamespace('tab');
 
-export default {
+export default createComponent({
   props: {
     type: String,
     color: String,
@@ -51,12 +51,6 @@ export default {
   methods: {
     onClick() {
       this.$emit('click');
-    },
-
-    renderTitle(el) {
-      const { title } = this.$refs;
-      title.innerHTML = '';
-      title.appendChild(el);
     }
   },
 
@@ -73,10 +67,10 @@ export default {
         style={this.style}
         onClick={this.onClick}
       >
-        <span ref="title" class={{ 'van-ellipsis': this.ellipsis }}>
-          {this.title}
+        <span class={{ 'van-ellipsis': this.ellipsis }}>
+          {this.slots() || this.title}
         </span>
       </div>
     );
   }
-};
+});

src/tabs/index.js

@@ -203,7 +203,11 @@ export default createComponent({
         this.$emit('input', this.currentName);
 
         if (shouldEmitChange) {
-          this.$emit('change', this.currentName, this.children[currentIndex].title);
+          this.$emit(
+            'change',
+            this.currentName,
+            this.children[currentIndex].title
+          );
         }
       }
     },
@@ -246,13 +250,6 @@ export default createComponent({
       scrollLeftTo(nav, to, immediate ? 0 : this.duration);
     },
 
-    // render title slot of child tab
-    renderTitle(el, index) {
-      this.$nextTick(() => {
-        this.$refs.titles[index].renderTitle(el);
-      });
-    },
-
     onScroll(params) {
       this.stickyFixed = params.isFixed;
       this.$emit('scroll', params);
@@ -276,6 +273,9 @@ export default createComponent({
         activeColor={this.titleActiveColor}
         inactiveColor={this.titleInactiveColor}
         swipeThreshold={this.swipeThreshold}
+        scopedSlots={{
+          default: () => item.slots('title')
+        }}
         onClick={() => {
           this.onClick(index);
           route(item.$router, item);
@@ -291,10 +291,17 @@ export default createComponent({
           { [BORDER_TOP_BOTTOM]: type === 'line' && this.border }
         ]}
       >
-        <div ref="nav" role="tablist" class={bem('nav', [type])} style={this.navStyle}>
+        <div
+          ref="nav"
+          role="tablist"
+          class={bem('nav', [type])}
+          style={this.navStyle}
+        >
           {this.slots('nav-left')}
           {Nav}
-          {type === 'line' && <div class={bem('line')} style={this.lineStyle} />}
+          {type === 'line' && (
+            <div class={bem('line')} style={this.lineStyle} />
+          )}
           {this.slots('nav-right')}
         </div>
       </div>