diff --git a/docs/site/mobile.js b/docs/site/mobile.js
index b2dc843a9..eb566099c 100644
--- a/docs/site/mobile.js
+++ b/docs/site/mobile.js
@@ -21,7 +21,7 @@ let demoUid = 0;
 // helper for demo locales
 Vue.mixin({
   computed: {
-    $t() {
+    t() {
       const { name } = this.$options;
       const { lang = 'zh-CN' } = (this.$route && this.$route.meta) || {};
       const prefix = name ? camelize(name) + '.' : '';
diff --git a/src/action-sheet/demo/index.vue b/src/action-sheet/demo/index.vue
index c48ec118f..01979c46b 100644
--- a/src/action-sheet/demo/index.vue
+++ b/src/action-sheet/demo/index.vue
@@ -1,25 +1,25 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
-      <van-cell is-link :title="$t('basicUsage')" @click="show.basic = true" />
-      <van-cell is-link :title="$t('showCancel')" @click="show.cancel = true" />
+    <demo-block :title="t('basicUsage')">
+      <van-cell is-link :title="t('basicUsage')" @click="show.basic = true" />
+      <van-cell is-link :title="t('showCancel')" @click="show.cancel = true" />
       <van-cell
         is-link
-        :title="$t('showDescription')"
+        :title="t('showDescription')"
         @click="show.description = true"
       />
     </demo-block>
 
-    <demo-block :title="$t('optionStatus')">
+    <demo-block :title="t('optionStatus')">
       <van-cell
         is-link
-        :title="$t('optionStatus')"
+        :title="t('optionStatus')"
         @click="show.status = true"
       />
     </demo-block>
 
-    <demo-block :title="$t('customPanel')">
-      <van-cell is-link :title="$t('customPanel')" @click="show.title = true" />
+    <demo-block :title="t('customPanel')">
+      <van-cell is-link :title="t('customPanel')" @click="show.title = true" />
     </demo-block>
 
     <van-action-sheet
@@ -32,14 +32,14 @@
       v-model="show.status"
       close-on-click-action
       :actions="statusActions"
-      :cancel-text="$t('cancel')"
+      :cancel-text="t('cancel')"
     />
 
     <van-action-sheet
       v-model="show.cancel"
       :actions="simpleActions"
       close-on-click-action
-      :cancel-text="$t('cancel')"
+      :cancel-text="t('cancel')"
       @cancel="onCancel"
     />
 
@@ -47,11 +47,11 @@
       v-model="show.description"
       :actions="simpleActions"
       close-on-click-action
-      :description="$t('description')"
+      :description="t('description')"
     />
 
-    <van-action-sheet v-model="show.title" :title="$t('title')">
-      <div class="demo-action-sheet-content">{{ $t('content') }}</div>
+    <van-action-sheet v-model="show.title" :title="t('title')">
+      <div class="demo-action-sheet-content">{{ t('content') }}</div>
     </van-action-sheet>
   </demo-section>
 </template>
@@ -98,17 +98,17 @@ export default {
   computed: {
     simpleActions() {
       return [
-        { name: this.$t('option') },
-        { name: this.$t('option') },
-        { name: this.$t('option'), subname: this.$t('subname') },
+        { name: this.t('option') },
+        { name: this.t('option') },
+        { name: this.t('option'), subname: this.t('subname') },
       ];
     },
 
     statusActions() {
       return [
-        { name: this.$t('option'), color: GREEN },
+        { name: this.t('option'), color: GREEN },
         { loading: true },
-        { name: this.$t('disabledOption'), disabled: true },
+        { name: this.t('disabledOption'), disabled: true },
       ];
     },
   },
diff --git a/src/address-edit/demo/index.vue b/src/address-edit/demo/index.vue
index 108bca294..a9eed0f0a 100644
--- a/src/address-edit/demo/index.vue
+++ b/src/address-edit/demo/index.vue
@@ -1,6 +1,6 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-address-edit
         :area-list="areaList"
         show-postal
@@ -8,7 +8,7 @@
         show-set-default
         show-search-result
         :search-result="searchResult"
-        :area-columns-placeholder="$t('areaColumnsPlaceholder')"
+        :area-columns-placeholder="t('areaColumnsPlaceholder')"
         @save="onSave"
         @delete="onDelete"
         @change-detail="onChangeDetail"
@@ -65,15 +65,15 @@ export default {
 
   methods: {
     onSave() {
-      this.$toast(this.$t('save'));
+      this.$toast(this.t('save'));
     },
 
     onDelete() {
-      this.$toast(this.$t('delete'));
+      this.$toast(this.t('delete'));
     },
 
     onChangeDetail(val) {
-      this.searchResult = val ? this.$t('searchResult') : [];
+      this.searchResult = val ? this.t('searchResult') : [];
     },
   },
 };
diff --git a/src/address-list/demo/index.vue b/src/address-list/demo/index.vue
index 8a6190849..60d74b2f6 100644
--- a/src/address-list/demo/index.vue
+++ b/src/address-list/demo/index.vue
@@ -1,12 +1,12 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-address-list
         v-model="chosenAddressId"
-        :list="$t('list')"
-        :disabled-list="$t('disabledList')"
-        :disabled-text="$t('disabledText')"
-        :default-tag-text="$t('defaultTagText')"
+        :list="t('list')"
+        :disabled-list="t('disabledList')"
+        :disabled-text="t('disabledText')"
+        :default-tag-text="t('defaultTagText')"
         @add="onAdd"
         @edit="onEdit"
       />
@@ -85,11 +85,11 @@ export default {
 
   methods: {
     onAdd() {
-      this.$toast(this.$t('add'));
+      this.$toast(this.t('add'));
     },
 
     onEdit(item, index) {
-      this.$toast(`${this.$t('edit')}:${index}`);
+      this.$toast(`${this.t('edit')}:${index}`);
     },
   },
 };
diff --git a/src/area/demo/index.vue b/src/area/demo/index.vue
index 5bad071ba..3a8c24d39 100644
--- a/src/area/demo/index.vue
+++ b/src/area/demo/index.vue
@@ -1,26 +1,26 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
-      <van-area :area-list="$t('areaList')" />
+    <demo-block :title="t('basicUsage')">
+      <van-area :area-list="t('areaList')" />
     </demo-block>
 
-    <demo-block :title="$t('title2')">
-      <van-area :area-list="$t('areaList')" :value="value" />
+    <demo-block :title="t('title2')">
+      <van-area :area-list="t('areaList')" :value="value" />
     </demo-block>
 
-    <demo-block :title="$t('title3')">
+    <demo-block :title="t('title3')">
       <van-area
-        :area-list="$t('areaList')"
+        :area-list="t('areaList')"
         :columns-num="2"
-        :title="$t('title')"
+        :title="t('title')"
       />
     </demo-block>
 
-    <demo-block :title="$t('title4')">
+    <demo-block :title="t('title4')">
       <van-area
-        :area-list="$t('areaList')"
-        :columns-placeholder="$t('columnsPlaceholder')"
-        :title="$t('title')"
+        :area-list="t('areaList')"
+        :columns-placeholder="t('columnsPlaceholder')"
+        :title="t('title')"
       />
     </demo-block>
   </demo-section>
diff --git a/src/button/demo/index.vue b/src/button/demo/index.vue
index 93ad5dd2b..9e5ef10a5 100644
--- a/src/button/demo/index.vue
+++ b/src/button/demo/index.vue
@@ -1,78 +1,78 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('type')">
+    <demo-block :title="t('type')">
       <div class="demo-button-row">
-        <van-button type="default">{{ $t('default') }}</van-button>
-        <van-button type="primary">{{ $t('primary') }}</van-button>
-        <van-button type="info">{{ $t('info') }}</van-button>
+        <van-button type="default">{{ t('default') }}</van-button>
+        <van-button type="primary">{{ t('primary') }}</van-button>
+        <van-button type="info">{{ t('info') }}</van-button>
       </div>
-      <van-button type="danger">{{ $t('danger') }}</van-button>
-      <van-button type="warning">{{ $t('warning') }}</van-button>
+      <van-button type="danger">{{ t('danger') }}</van-button>
+      <van-button type="warning">{{ t('warning') }}</van-button>
     </demo-block>
 
-    <demo-block :title="$t('plain')">
-      <van-button plain type="primary" :text="$t('plain')" />
-      <van-button plain type="info" :text="$t('plain')" />
+    <demo-block :title="t('plain')">
+      <van-button plain type="primary" :text="t('plain')" />
+      <van-button plain type="info" :text="t('plain')" />
     </demo-block>
 
-    <demo-block :title="$t('hairline')">
-      <van-button plain hairline type="primary" :text="$t('hairlineButton')" />
-      <van-button plain hairline type="info" :text="$t('hairlineButton')" />
+    <demo-block :title="t('hairline')">
+      <van-button plain hairline type="primary" :text="t('hairlineButton')" />
+      <van-button plain hairline type="info" :text="t('hairlineButton')" />
     </demo-block>
 
-    <demo-block :title="$t('disabled')">
-      <van-button disabled type="primary" :text="$t('disabled')" />
-      <van-button disabled type="info" :text="$t('disabled')" />
+    <demo-block :title="t('disabled')">
+      <van-button disabled type="primary" :text="t('disabled')" />
+      <van-button disabled type="info" :text="t('disabled')" />
     </demo-block>
 
-    <demo-block :title="$t('loadingStatus')">
+    <demo-block :title="t('loadingStatus')">
       <van-button loading type="primary" />
       <van-button loading type="primary" loading-type="spinner" />
-      <van-button loading :loading-text="$t('loadingText')" type="info" />
+      <van-button loading :loading-text="t('loadingText')" type="info" />
     </demo-block>
 
-    <demo-block :title="$t('shape')">
-      <van-button type="primary" square :text="$t('square')" />
-      <van-button type="info" round :text="$t('round')" />
+    <demo-block :title="t('shape')">
+      <van-button type="primary" square :text="t('square')" />
+      <van-button type="info" round :text="t('round')" />
     </demo-block>
 
-    <demo-block :title="$t('icon')">
+    <demo-block :title="t('icon')">
       <van-button type="primary" icon="star-o" />
-      <van-button type="primary" icon="star-o" :text="$t('button')" />
+      <van-button type="primary" icon="star-o" :text="t('button')" />
       <van-button
         plain
         type="primary"
         icon="https://img.yzcdn.cn/vant/logo.png"
-        :text="$t('button')"
+        :text="t('button')"
       />
     </demo-block>
 
-    <demo-block :title="$t('size')">
-      <van-button type="primary" size="large">{{ $t('large') }}</van-button>
-      <van-button type="primary" size="normal">{{ $t('normal') }}</van-button>
-      <van-button type="primary" size="small">{{ $t('small') }}</van-button>
-      <van-button type="primary" size="mini">{{ $t('mini') }}</van-button>
+    <demo-block :title="t('size')">
+      <van-button type="primary" size="large">{{ t('large') }}</van-button>
+      <van-button type="primary" size="normal">{{ t('normal') }}</van-button>
+      <van-button type="primary" size="small">{{ t('small') }}</van-button>
+      <van-button type="primary" size="mini">{{ t('mini') }}</van-button>
     </demo-block>
 
-    <demo-block :title="$t('blockElement')">
-      <van-button type="primary" block>{{ $t('blockElement') }}</van-button>
+    <demo-block :title="t('blockElement')">
+      <van-button type="primary" block>{{ t('blockElement') }}</van-button>
     </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="$t('router')">
+    <demo-block v-if="!isWeapp" :title="t('router')">
       <van-button
-        :text="$t('urlRoute')"
+        :text="t('urlRoute')"
         type="primary"
         url="/vant/mobile.html"
       />
-      <van-button :text="$t('vueRoute')" type="primary" to="index" />
+      <van-button :text="t('vueRoute')" type="primary" to="index" />
     </demo-block>
 
-    <demo-block :title="$t('customColor')">
-      <van-button color="#7232dd" :text="$t('pure')" />
-      <van-button plain color="#7232dd" :text="$t('pure')" />
+    <demo-block :title="t('customColor')">
+      <van-button color="#7232dd" :text="t('pure')" />
+      <van-button plain color="#7232dd" :text="t('pure')" />
       <van-button
         color="linear-gradient(to right, #4bb0ff, #6149f6)"
-        :text="$t('gradient')"
+        :text="t('gradient')"
       />
     </demo-block>
   </demo-section>
diff --git a/src/calendar/demo/index.vue b/src/calendar/demo/index.vue
index adbf52224..42a834a41 100644
--- a/src/calendar/demo/index.vue
+++ b/src/calendar/demo/index.vue
@@ -1,91 +1,91 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-cell
         is-link
-        :title="$t('selectSingle')"
+        :title="t('selectSingle')"
         :value="formatFullDate(date.selectSingle)"
         @click="show('single', 'selectSingle')"
       />
 
       <van-cell
         is-link
-        :title="$t('selectMultiple')"
+        :title="t('selectMultiple')"
         :value="formatMultiple(date.selectMultiple)"
         @click="show('multiple', 'selectMultiple')"
       />
 
       <van-cell
         is-link
-        :title="$t('selectRange')"
+        :title="t('selectRange')"
         :value="formatRange(date.selectRange)"
         @click="show('range', 'selectRange')"
       />
     </demo-block>
 
-    <demo-block :title="$t('quickSelect')">
+    <demo-block :title="t('quickSelect')">
       <van-cell
         is-link
-        :title="$t('selectSingle')"
+        :title="t('selectSingle')"
         :value="formatFullDate(date.quickSelect1)"
         @click="show('single', 'quickSelect1')"
       />
 
       <van-cell
         is-link
-        :title="$t('selectRange')"
+        :title="t('selectRange')"
         :value="formatRange(date.quickSelect2)"
         @click="show('range', 'quickSelect2')"
       />
     </demo-block>
 
-    <demo-block :title="$t('customCalendar')">
+    <demo-block :title="t('customCalendar')">
       <van-cell
         is-link
-        :title="$t('customColor')"
+        :title="t('customColor')"
         :value="formatRange(date.customColor)"
         @click="show('range', 'customColor')"
       />
 
       <van-cell
         is-link
-        :title="$t('customRange')"
+        :title="t('customRange')"
         :value="formatFullDate(date.customRange)"
         @click="show('single', 'customRange')"
       />
 
       <van-cell
         is-link
-        :title="$t('customConfirm')"
+        :title="t('customConfirm')"
         :value="formatRange(date.customConfirm)"
         @click="show('range', 'customConfirm')"
       />
 
       <van-cell
         is-link
-        :title="$t('customDayText')"
+        :title="t('customDayText')"
         :value="formatRange(date.customDayText)"
         @click="show('range', 'customDayText')"
       />
 
       <van-cell
         is-link
-        :title="$t('customPosition')"
+        :title="t('customPosition')"
         :value="formatFullDate(date.customPosition)"
         @click="show('single', 'customPosition')"
       />
 
       <van-cell
         is-link
-        :title="$t('maxRange')"
+        :title="t('maxRange')"
         :value="formatRange(date.maxRange)"
         @click="show('range', 'maxRange')"
       />
     </demo-block>
 
-    <demo-block :title="$t('tiledDisplay')">
+    <demo-block :title="t('tiledDisplay')">
       <van-calendar
-        :title="$t('calendar')"
+        :title="t('calendar')"
         :poppable="false"
         :show-confirm="false"
         :min-date="tiledMinDate"
@@ -226,8 +226,8 @@ export default {
           this.color = GREEN;
           break;
         case 'customConfirm':
-          this.confirmText = this.$t('confirmText');
-          this.confirmDisabledText = this.$t('confirmDisabledText');
+          this.confirmText = this.t('confirmText');
+          this.confirmDisabledText = this.t('confirmDisabledText');
           break;
         case 'customRange':
           this.minDate = new Date(2010, 0, 1);
@@ -254,18 +254,18 @@ export default {
 
       if (month === 5) {
         if (date === 1) {
-          day.topInfo = this.$t('laborDay');
+          day.topInfo = this.t('laborDay');
         } else if (date === 4) {
-          day.topInfo = this.$t('youthDay');
+          day.topInfo = this.t('youthDay');
         } else if (date === 11) {
-          day.text = this.$t('today');
+          day.text = this.t('today');
         }
       }
 
       if (day.type === 'start') {
-        day.bottomInfo = this.$t('in');
+        day.bottomInfo = this.t('in');
       } else if (day.type === 'end') {
-        day.bottomInfo = this.$t('out');
+        day.bottomInfo = this.t('out');
       }
 
       return day;
@@ -285,7 +285,7 @@ export default {
 
     formatMultiple(dates) {
       if (dates.length) {
-        return this.$t('selectCount', dates.length);
+        return this.t('selectCount', dates.length);
       }
     },
 
diff --git a/src/card/demo/index.vue b/src/card/demo/index.vue
index 6c5e5afc4..010f84f49 100644
--- a/src/card/demo/index.vue
+++ b/src/card/demo/index.vue
@@ -1,33 +1,33 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-card
         num="2"
         price="2.00"
-        :desc="$t('desc')"
-        :title="$t('title')"
+        :desc="t('desc')"
+        :title="t('title')"
         :thumb="imageURL"
       />
     </demo-block>
 
-    <demo-block :title="$t('discountInfo')">
+    <demo-block :title="t('discountInfo')">
       <van-card
         num="2"
         price="2.00"
         origin-price="10.00"
-        :tag="$t('tag')"
-        :desc="$t('desc')"
-        :title="$t('title')"
+        :tag="t('tag')"
+        :desc="t('desc')"
+        :title="t('title')"
         :thumb="imageURL"
       />
     </demo-block>
 
-    <demo-block :title="$t('customContent')">
+    <demo-block :title="t('customContent')">
       <van-card
         num="2"
         price="2.00"
-        :desc="$t('desc')"
-        :title="$t('title')"
+        :desc="t('desc')"
+        :title="t('title')"
         :thumb="imageURL"
       >
         <template #tags>
@@ -44,10 +44,10 @@
         <template #footer>
           <div>
             <van-button round size="mini">
-              {{ $t('button') }}
+              {{ t('button') }}
             </van-button>
             <van-button round size="mini">
-              {{ $t('button') }}
+              {{ t('button') }}
             </van-button>
           </div>
         </template>
diff --git a/src/cell/demo/index.vue b/src/cell/demo/index.vue
index fb7b23c31..f7b47398a 100644
--- a/src/cell/demo/index.vue
+++ b/src/cell/demo/index.vue
@@ -1,80 +1,76 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-cell-group>
-        <van-cell :title="$t('cell')" :value="$t('content')" />
-        <van-cell
-          :title="$t('cell')"
-          :value="$t('content')"
-          :label="$t('desc')"
-        />
+        <van-cell :title="t('cell')" :value="t('content')" />
+        <van-cell :title="t('cell')" :value="t('content')" :label="t('desc')" />
       </van-cell-group>
     </demo-block>
 
-    <demo-block :title="$t('largeSize')">
-      <van-cell :title="$t('cell')" :value="$t('content')" size="large" />
+    <demo-block :title="t('largeSize')">
+      <van-cell :title="t('cell')" :value="t('content')" size="large" />
       <van-cell
-        :title="$t('cell')"
-        :value="$t('content')"
+        :title="t('cell')"
+        :value="t('content')"
         size="large"
-        :label="$t('desc')"
+        :label="t('desc')"
       />
     </demo-block>
 
-    <demo-block :title="$t('showIcon')">
-      <van-cell :title="$t('cell')" :value="$t('content')" icon="location-o" />
+    <demo-block :title="t('showIcon')">
+      <van-cell :title="t('cell')" :value="t('content')" icon="location-o" />
     </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="$t('valueOnly')">
-      <van-cell :value="$t('content')" />
+    <demo-block v-if="!isWeapp" :title="t('valueOnly')">
+      <van-cell :value="t('content')" />
     </demo-block>
 
-    <demo-block :title="$t('showArrow')">
-      <van-cell :title="$t('cell')" is-link />
-      <van-cell :title="$t('cell')" is-link :value="$t('content')" />
+    <demo-block :title="t('showArrow')">
+      <van-cell :title="t('cell')" is-link />
+      <van-cell :title="t('cell')" is-link :value="t('content')" />
       <van-cell
-        :title="$t('cell')"
+        :title="t('cell')"
         is-link
         arrow-direction="down"
-        :value="$t('content')"
+        :value="t('content')"
       />
     </demo-block>
 
-    <demo-block :title="$t('router')">
-      <van-cell :title="$t('urlRoute')" is-link url="/vant/mobile.html" />
-      <van-cell :title="$t('vueRoute')" is-link to="index" />
+    <demo-block :title="t('router')">
+      <van-cell :title="t('urlRoute')" is-link url="/vant/mobile.html" />
+      <van-cell :title="t('vueRoute')" is-link to="index" />
     </demo-block>
 
-    <demo-block :title="$t('groupTitle')">
-      <van-cell-group :title="`${$t('group')} 1`">
-        <van-cell :title="$t('cell')" :value="$t('content')" />
+    <demo-block :title="t('groupTitle')">
+      <van-cell-group :title="`${t('group')} 1`">
+        <van-cell :title="t('cell')" :value="t('content')" />
       </van-cell-group>
-      <van-cell-group :title="`${$t('group')} 2`">
-        <van-cell :title="$t('cell')" :value="$t('content')" />
+      <van-cell-group :title="`${t('group')} 2`">
+        <van-cell :title="t('cell')" :value="t('content')" />
       </van-cell-group>
     </demo-block>
 
-    <demo-block :title="$t('useSlots')">
-      <van-cell :value="$t('content')" is-link>
+    <demo-block :title="t('useSlots')">
+      <van-cell :value="t('content')" is-link>
         <template #title>
-          <span class="custom-title">{{ $t('cell') }}</span>
-          <van-tag type="danger">{{ $t('tag') }}</van-tag>
+          <span class="custom-title">{{ t('cell') }}</span>
+          <van-tag type="danger">{{ t('tag') }}</van-tag>
         </template>
       </van-cell>
 
-      <van-cell icon="shop-o" :title="$t('cell')">
+      <van-cell icon="shop-o" :title="t('cell')">
         <template #right-icon>
           <van-icon name="search" style="line-height: inherit;" />
         </template>
       </van-cell>
     </demo-block>
 
-    <demo-block :title="$t('verticalCenter')">
+    <demo-block :title="t('verticalCenter')">
       <van-cell
         center
-        :title="$t('cell')"
-        :value="$t('content')"
-        :label="$t('desc')"
+        :title="t('cell')"
+        :value="t('content')"
+        :label="t('desc')"
       />
     </demo-block>
   </demo-section>
diff --git a/src/checkbox/demo/index.vue b/src/checkbox/demo/index.vue
index 4bc3db09b..aee4d571b 100644
--- a/src/checkbox/demo/index.vue
+++ b/src/checkbox/demo/index.vue
@@ -1,98 +1,98 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
-      <van-checkbox v-model="checkbox1">{{ $t('checkbox') }}</van-checkbox>
+    <demo-block :title="t('basicUsage')">
+      <van-checkbox v-model="checkbox1">{{ t('checkbox') }}</van-checkbox>
     </demo-block>
 
-    <demo-block :title="$t('disabled')">
+    <demo-block :title="t('disabled')">
       <van-checkbox :value="false" disabled>
-        {{ $t('checkbox') }}
+        {{ t('checkbox') }}
       </van-checkbox>
       <van-checkbox :value="true" disabled>
-        {{ $t('checkbox') }}
+        {{ t('checkbox') }}
       </van-checkbox>
     </demo-block>
 
-    <demo-block :title="$t('customShape')">
+    <demo-block :title="t('customShape')">
       <van-checkbox v-model="checkboxShape" shape="square">
-        {{ $t('customColor') }}
+        {{ t('customColor') }}
       </van-checkbox>
     </demo-block>
 
-    <demo-block :title="$t('customColor')">
+    <demo-block :title="t('customColor')">
       <van-checkbox v-model="checkbox2" checked-color="#07c160">
-        {{ $t('customColor') }}
+        {{ t('customColor') }}
       </van-checkbox>
     </demo-block>
 
-    <demo-block :title="$t('customIconSize')">
+    <demo-block :title="t('customIconSize')">
       <van-checkbox v-model="checboxIcon" icon-size="24px">
-        {{ $t('customIconSize') }}
+        {{ t('customIconSize') }}
       </van-checkbox>
     </demo-block>
 
-    <demo-block :title="$t('customIcon')">
+    <demo-block :title="t('customIcon')">
       <van-checkbox v-model="checkbox3">
-        {{ $t('customIcon') }}
+        {{ t('customIcon') }}
         <template #icon="{ checked }">
           <img :src="checked ? activeIcon : inactiveIcon" />
         </template>
       </van-checkbox>
     </demo-block>
 
-    <demo-block :title="$t('disableLabel')">
+    <demo-block :title="t('disableLabel')">
       <van-checkbox v-model="checkboxLabel" label-disabled>
-        {{ $t('checkbox') }}
+        {{ t('checkbox') }}
       </van-checkbox>
     </demo-block>
 
-    <demo-block :title="$t('title3')">
+    <demo-block :title="t('title3')">
       <van-checkbox-group v-model="result">
-        <van-checkbox name="a">{{ $t('checkbox') }} a</van-checkbox>
-        <van-checkbox name="b">{{ $t('checkbox') }} b</van-checkbox>
+        <van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
+        <van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
       </van-checkbox-group>
     </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="$t('horizontal')">
+    <demo-block v-if="!isWeapp" :title="t('horizontal')">
       <van-checkbox-group v-model="horizontalResult" direction="horizontal">
-        <van-checkbox name="a">{{ $t('checkbox') }} a</van-checkbox>
-        <van-checkbox name="b">{{ $t('checkbox') }} b</van-checkbox>
+        <van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
+        <van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
       </van-checkbox-group>
     </demo-block>
 
-    <demo-block :title="$t('title4')">
+    <demo-block :title="t('title4')">
       <van-checkbox-group v-model="result2" :max="2">
-        <van-checkbox name="a">{{ $t('checkbox') }} a</van-checkbox>
-        <van-checkbox name="b">{{ $t('checkbox') }} b</van-checkbox>
-        <van-checkbox name="c">{{ $t('checkbox') }} c</van-checkbox>
+        <van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
+        <van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
+        <van-checkbox name="c">{{ t('checkbox') }} c</van-checkbox>
       </van-checkbox-group>
     </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="$t('toggleAll')">
+    <demo-block v-if="!isWeapp" :title="t('toggleAll')">
       <van-checkbox-group v-model="checkAllResult" ref="group">
-        <van-checkbox name="a">{{ $t('checkbox') }} a</van-checkbox>
-        <van-checkbox name="b">{{ $t('checkbox') }} b</van-checkbox>
-        <van-checkbox name="c">{{ $t('checkbox') }} c</van-checkbox>
+        <van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
+        <van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
+        <van-checkbox name="c">{{ t('checkbox') }} c</van-checkbox>
       </van-checkbox-group>
 
       <div class="demo-checkbox-buttons">
         <van-button type="primary" @click="checkAll">
-          {{ $t('checkAll') }}
+          {{ t('checkAll') }}
         </van-button>
         <van-button type="info" @click="toggleAll">
-          {{ $t('inverse') }}
+          {{ t('inverse') }}
         </van-button>
       </div>
     </demo-block>
 
-    <demo-block :title="$t('title5')">
+    <demo-block :title="t('title5')">
       <van-checkbox-group v-model="result3">
         <van-cell-group>
           <van-cell
             v-for="(item, index) in list"
             clickable
             :key="index"
-            :title="`${$t('checkbox')} ${item}`"
+            :title="`${t('checkbox')} ${item}`"
             @click="toggle(index)"
           >
             <template #right-icon>
diff --git a/src/circle/demo/index.vue b/src/circle/demo/index.vue
index d41a507a7..445c26605 100644
--- a/src/circle/demo/index.vue
+++ b/src/circle/demo/index.vue
@@ -1,6 +1,6 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-circle
         v-model="currentRate1"
         :rate="rate"
@@ -9,13 +9,13 @@
       />
     </demo-block>
 
-    <demo-block :title="$t('customStyle')">
+    <demo-block :title="t('customStyle')">
       <van-circle
         v-model="currentRate3"
         :rate="rate"
         :speed="100"
         :stroke-width="60"
-        :text="$t('customWidth')"
+        :text="t('customWidth')"
       />
 
       <van-circle
@@ -24,7 +24,7 @@
         :rate="rate"
         layer-color="#ebedf0"
         :speed="100"
-        :text="$t('customColor')"
+        :text="t('customColor')"
       />
 
       <van-circle
@@ -32,7 +32,7 @@
         :rate="rate"
         :speed="100"
         :color="gradientColor"
-        :text="$t('gradient')"
+        :text="t('gradient')"
       />
 
       <van-circle
@@ -41,7 +41,7 @@
         :rate="rate"
         :speed="100"
         :clockwise="false"
-        :text="$t('counterClockwise')"
+        :text="t('counterClockwise')"
         style="margin-top: 15px;"
       />
 
@@ -52,15 +52,15 @@
         :speed="100"
         size="120px"
         :clockwise="false"
-        :text="$t('customSize')"
+        :text="t('customSize')"
         style="margin-top: 15px;"
       />
     </demo-block>
 
     <div style="margin-top: 15px;">
-      <van-button :text="$t('add')" type="primary" size="small" @click="add" />
+      <van-button :text="t('add')" type="primary" size="small" @click="add" />
       <van-button
-        :text="$t('decrease')"
+        :text="t('decrease')"
         type="danger"
         size="small"
         @click="reduce"
diff --git a/src/col/demo/index.vue b/src/col/demo/index.vue
index 1956093ca..5b396922a 100644
--- a/src/col/demo/index.vue
+++ b/src/col/demo/index.vue
@@ -1,6 +1,6 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-row>
         <van-col span="8">span: 8</van-col>
         <van-col span="8">span: 8</van-col>
@@ -21,7 +21,7 @@
       </van-row>
     </demo-block>
 
-    <demo-block :title="$t('title2')">
+    <demo-block :title="t('title2')">
       <van-row gutter="20">
         <van-col span="8">span: 8</van-col>
         <van-col span="8">span: 8</van-col>
@@ -29,7 +29,7 @@
       </van-row>
     </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="$t('title3')">
+    <demo-block v-if="!isWeapp" :title="t('title3')">
       <van-row type="flex">
         <van-col span="6">span: 6</van-col>
         <van-col span="6">span: 6</van-col>
diff --git a/src/collapse/demo/index.vue b/src/collapse/demo/index.vue
index 752010323..fa3a4aa06 100644
--- a/src/collapse/demo/index.vue
+++ b/src/collapse/demo/index.vue
@@ -1,47 +1,47 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-collapse v-model="active1">
-        <van-collapse-item :title="$t('title') + 1">
-          {{ $t('text') }}
+        <van-collapse-item :title="t('title') + 1">
+          {{ t('text') }}
         </van-collapse-item>
-        <van-collapse-item :title="$t('title') + 2">
-          {{ $t('text') }}
+        <van-collapse-item :title="t('title') + 2">
+          {{ t('text') }}
         </van-collapse-item>
-        <van-collapse-item :title="$t('title') + 3" disabled>
-          {{ $t('text') }}
+        <van-collapse-item :title="t('title') + 3" disabled>
+          {{ t('text') }}
         </van-collapse-item>
       </van-collapse>
     </demo-block>
 
-    <demo-block :title="$t('accordion')">
+    <demo-block :title="t('accordion')">
       <van-collapse v-model="active2" accordion>
-        <van-collapse-item :title="$t('title') + 1">
-          {{ $t('text') }}
+        <van-collapse-item :title="t('title') + 1">
+          {{ t('text') }}
         </van-collapse-item>
-        <van-collapse-item :title="$t('title') + 2">
-          {{ $t('text') }}
+        <van-collapse-item :title="t('title') + 2">
+          {{ t('text') }}
         </van-collapse-item>
-        <van-collapse-item :title="$t('title') + 3">
-          {{ $t('text') }}
+        <van-collapse-item :title="t('title') + 3">
+          {{ t('text') }}
         </van-collapse-item>
       </van-collapse>
     </demo-block>
 
-    <demo-block :title="$t('titleSlot')">
+    <demo-block :title="t('titleSlot')">
       <van-collapse v-model="active3">
         <van-collapse-item>
           <template #title>
-            {{ $t('title') + 1 }}<van-icon name="question-o" />
+            {{ t('title') + 1 }}<van-icon name="question-o" />
           </template>
-          {{ $t('text') }}
+          {{ t('text') }}
         </van-collapse-item>
         <van-collapse-item
-          :title="$t('title') + 2"
-          :value="$t('content')"
+          :title="t('title') + 2"
+          :value="t('content')"
           icon="shop-o"
         >
-          {{ $t('text') }}
+          {{ t('text') }}
         </van-collapse-item>
       </van-collapse>
     </demo-block>
diff --git a/src/contact-card/demo/index.vue b/src/contact-card/demo/index.vue
index c53ba8dbc..33cfa1b7e 100644
--- a/src/contact-card/demo/index.vue
+++ b/src/contact-card/demo/index.vue
@@ -1,6 +1,6 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-contact-card
         :type="cardType"
         :name="currentContact.name"
@@ -12,7 +12,7 @@
         <van-contact-list
           v-model="chosenContactId"
           :list="list"
-          :default-tag-text="$t('defaultTagText')"
+          :default-tag-text="t('defaultTagText')"
           @add="onAdd"
           @edit="onEdit"
           @select="onSelect"
@@ -22,7 +22,7 @@
       <van-popup v-model="showEdit" position="bottom" :lazy-render="false">
         <van-contact-edit
           show-set-default
-          :set-default-label="$t('defaultLabel')"
+          :set-default-label="t('defaultLabel')"
           :contact-info="editingContact"
           :is-edit="isEdit"
           @save="onSave"
@@ -31,7 +31,7 @@
       </van-popup>
     </demo-block>
 
-    <demo-block :title="$t('uneditable')">
+    <demo-block :title="t('uneditable')">
       <van-contact-card
         type="edit"
         :name="mockContact.name"
@@ -71,7 +71,7 @@ export default {
   computed: {
     mockContact() {
       return {
-        name: this.$t('name'),
+        name: this.t('name'),
         tel: '13000000000',
         id: 0,
         isDefault: 1,
diff --git a/src/count-down/demo/index.vue b/src/count-down/demo/index.vue
index bf0d6d2f0..c13f6e2f6 100644
--- a/src/count-down/demo/index.vue
+++ b/src/count-down/demo/index.vue
@@ -1,18 +1,18 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-count-down :time="time" />
     </demo-block>
 
-    <demo-block :title="$t('customFormat')">
-      <van-count-down :time="time" :format="$t('formatWithDay')" />
+    <demo-block :title="t('customFormat')">
+      <van-count-down :time="time" :format="t('formatWithDay')" />
     </demo-block>
 
-    <demo-block :title="$t('millisecond')">
+    <demo-block :title="t('millisecond')">
       <van-count-down millisecond :time="time" format="HH:mm:ss:SS" />
     </demo-block>
 
-    <demo-block :title="$t('customStyle')">
+    <demo-block :title="t('customStyle')">
       <van-count-down :time="time">
         <template v-slot="currentTime">
           <span class="item">{{ currentTime.hours }}</span>
@@ -22,27 +22,23 @@
       </van-count-down>
     </demo-block>
 
-    <demo-block :title="$t('manualControl')">
+    <demo-block :title="t('manualControl')">
       <van-count-down
         ref="countDown"
         millisecond
         :time="3000"
         :auto-start="false"
         format="ss:SSS"
-        @finish="$toast($t('finished'))"
+        @finish="$toast(t('finished'))"
       />
       <van-grid clickable :column-num="3">
-        <van-grid-item
-          icon="play-circle-o"
-          :text="$t('start')"
-          @click="start"
-        />
+        <van-grid-item icon="play-circle-o" :text="t('start')" @click="start" />
         <van-grid-item
           icon="pause-circle-o"
-          :text="$t('pause')"
+          :text="t('pause')"
           @click="pause"
         />
-        <van-grid-item icon="replay" :text="$t('reset')" @click="reset" />
+        <van-grid-item icon="replay" :text="t('reset')" @click="reset" />
       </van-grid>
     </demo-block>
   </demo-section>
diff --git a/src/coupon-list/demo/index.vue b/src/coupon-list/demo/index.vue
index 0414e5ebd..7758b4021 100644
--- a/src/coupon-list/demo/index.vue
+++ b/src/coupon-list/demo/index.vue
@@ -1,6 +1,6 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-coupon-cell
         :coupons="coupons"
         :chosen-coupon="chosenCoupon"
@@ -70,8 +70,8 @@ export default {
         condition: '无使用门槛\n最多优惠12元',
         reason: '',
         value: 150,
-        name: this.$t('coupon.name'),
-        description: this.$t('coupon.description'),
+        name: this.t('coupon.name'),
+        description: this.t('coupon.description'),
         startAt: 1489104000,
         endAt: 1514592000,
         valueDesc: '1.5',
@@ -93,7 +93,7 @@ export default {
       return {
         ...this.coupon,
         id: 3,
-        reason: this.$t('coupon.reason'),
+        reason: this.t('coupon.reason'),
       };
     },
 
@@ -103,7 +103,7 @@ export default {
         valueDesc: '1',
         unitDesc: '折',
         id: 4,
-        reason: this.$t('coupon.reason'),
+        reason: this.t('coupon.reason'),
       };
     },
   },
@@ -114,7 +114,7 @@ export default {
       this.chosenCoupon = index;
     },
     onExchange() {
-      this.$toast(this.$t('exchange'));
+      this.$toast(this.t('exchange'));
       this.exchangedCoupons.push({
         ...this.coupon,
         id: this.randomId(),
diff --git a/src/datetime-picker/demo/index.vue b/src/datetime-picker/demo/index.vue
index 5256bec5b..cf9aa1468 100644
--- a/src/datetime-picker/demo/index.vue
+++ b/src/datetime-picker/demo/index.vue
@@ -1,6 +1,6 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('title1')">
+    <demo-block :title="t('title1')">
       <van-datetime-picker
         v-model="currentDate1"
         type="datetime"
@@ -9,7 +9,7 @@
       />
     </demo-block>
 
-    <demo-block :title="$t('title2')">
+    <demo-block :title="t('title2')">
       <van-datetime-picker
         v-model="currentDate2"
         type="date"
@@ -18,7 +18,7 @@
       />
     </demo-block>
 
-    <demo-block :title="$t('title3')">
+    <demo-block :title="t('title3')">
       <van-datetime-picker
         v-model="currentDate3"
         type="year-month"
@@ -28,7 +28,7 @@
       />
     </demo-block>
 
-    <demo-block :title="$t('title4')">
+    <demo-block :title="t('title4')">
       <van-datetime-picker
         v-model="currentTime1"
         type="time"
@@ -37,7 +37,7 @@
       />
     </demo-block>
 
-    <demo-block :title="$t('optionFilter')">
+    <demo-block :title="t('optionFilter')">
       <van-datetime-picker
         v-model="currentTime2"
         type="time"
@@ -85,10 +85,10 @@ export default {
   methods: {
     formatter(type, value) {
       if (type === 'year') {
-        return value + this.$t('year');
+        return value + this.t('year');
       }
       if (type === 'month') {
-        return value + this.$t('month');
+        return value + this.t('month');
       }
       return value;
     },
diff --git a/src/dialog/demo/index.vue b/src/dialog/demo/index.vue
index 6eecf626a..5b1fa2165 100644
--- a/src/dialog/demo/index.vue
+++ b/src/dialog/demo/index.vue
@@ -1,33 +1,33 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('alert1')">
+    <demo-block :title="t('alert1')">
       <van-button type="primary" @click="onClickAlert">
-        {{ $t('alert1') }}
+        {{ t('alert1') }}
       </van-button>
       <van-button type="primary" @click="onClickAlert2">
-        {{ $t('alert2') }}
+        {{ t('alert2') }}
       </van-button>
     </demo-block>
 
-    <demo-block :title="$t('confirm')">
+    <demo-block :title="t('confirm')">
       <van-button type="primary" @click="onClickConfirm">
-        {{ $t('confirm') }}
+        {{ t('confirm') }}
       </van-button>
     </demo-block>
 
-    <demo-block :title="$t('asyncClose')">
+    <demo-block :title="t('asyncClose')">
       <van-button type="primary" @click="onClickAsyncClose">
-        {{ $t('asyncClose') }}
+        {{ t('asyncClose') }}
       </van-button>
     </demo-block>
 
-    <demo-block :title="$t('componentCall')">
+    <demo-block :title="t('componentCall')">
       <van-button type="primary" @click="show = true">
-        {{ $t('componentCall') }}
+        {{ t('componentCall') }}
       </van-button>
       <van-dialog
         v-model="show"
-        :title="$t('title')"
+        :title="t('title')"
         show-cancel-button
         :lazy-render="false"
       >
@@ -68,21 +68,21 @@ export default {
   methods: {
     onClickAlert() {
       this.$dialog.alert({
-        title: this.$t('title'),
-        message: this.$t('content'),
+        title: this.t('title'),
+        message: this.t('content'),
       });
     },
 
     onClickAlert2() {
       this.$dialog.alert({
-        message: this.$t('content'),
+        message: this.t('content'),
       });
     },
 
     onClickConfirm() {
       this.$dialog.confirm({
-        title: this.$t('title'),
-        message: this.$t('content'),
+        title: this.t('title'),
+        message: this.t('content'),
       });
     },
 
@@ -96,8 +96,8 @@ export default {
       }
 
       this.$dialog.confirm({
-        title: this.$t('title'),
-        message: this.$t('content'),
+        title: this.t('title'),
+        message: this.t('content'),
         beforeClose,
       });
     },
diff --git a/src/divider/demo/index.vue b/src/divider/demo/index.vue
index 98f20e124..c1ab46bc8 100644
--- a/src/divider/demo/index.vue
+++ b/src/divider/demo/index.vue
@@ -1,36 +1,36 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-divider />
     </demo-block>
 
-    <demo-block :title="$t('withText')">
+    <demo-block :title="t('withText')">
       <van-divider>
-        {{ $t('text') }}
+        {{ t('text') }}
       </van-divider>
     </demo-block>
 
-    <demo-block :title="$t('contentPosition')">
+    <demo-block :title="t('contentPosition')">
       <van-divider content-position="left">
-        {{ $t('text') }}
+        {{ t('text') }}
       </van-divider>
 
       <van-divider content-position="right">
-        {{ $t('text') }}
+        {{ t('text') }}
       </van-divider>
     </demo-block>
 
-    <demo-block :title="$t('dashed')">
+    <demo-block :title="t('dashed')">
       <van-divider dashed :hairline="false">
-        {{ $t('text') }}
+        {{ t('text') }}
       </van-divider>
     </demo-block>
 
-    <demo-block :title="$t('customStyle')">
+    <demo-block :title="t('customStyle')">
       <van-divider
         :style="{ borderColor: BLUE, color: BLUE, padding: '0 16px' }"
       >
-        {{ $t('text') }}
+        {{ t('text') }}
       </van-divider>
     </demo-block>
   </demo-section>
diff --git a/src/dropdown-menu/demo/index.vue b/src/dropdown-menu/demo/index.vue
index dc1f192cd..18e8ef119 100644
--- a/src/dropdown-menu/demo/index.vue
+++ b/src/dropdown-menu/demo/index.vue
@@ -1,40 +1,40 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-dropdown-menu>
         <van-dropdown-item v-model="value1" :options="option1" />
         <van-dropdown-item v-model="value2" :options="option2" />
       </van-dropdown-menu>
     </demo-block>
 
-    <demo-block :title="$t('customContent')">
+    <demo-block :title="t('customContent')">
       <van-dropdown-menu>
         <van-dropdown-item v-model="value1" :options="option1" />
-        <van-dropdown-item :title="$t('itemTitle')" ref="item">
-          <van-switch-cell v-model="switch1" :title="$t('switchTitle1')" />
-          <van-switch-cell v-model="switch2" :title="$t('switchTitle2')" />
+        <van-dropdown-item :title="t('itemTitle')" ref="item">
+          <van-switch-cell v-model="switch1" :title="t('switchTitle1')" />
+          <van-switch-cell v-model="switch2" :title="t('switchTitle2')" />
           <van-button type="info" block @click="onConfirm">
-            {{ $t('confirm') }}
+            {{ t('confirm') }}
           </van-button>
         </van-dropdown-item>
       </van-dropdown-menu>
     </demo-block>
 
-    <demo-block :title="$t('customActiveColor')">
+    <demo-block :title="t('customActiveColor')">
       <van-dropdown-menu active-color="#ee0a24">
         <van-dropdown-item v-model="value1" :options="option1" />
         <van-dropdown-item v-model="value2" :options="option2" />
       </van-dropdown-menu>
     </demo-block>
 
-    <demo-block :title="$t('expandDirection')">
+    <demo-block :title="t('expandDirection')">
       <van-dropdown-menu direction="up">
         <van-dropdown-item v-model="value1" :options="option1" />
         <van-dropdown-item v-model="value2" :options="option2" />
       </van-dropdown-menu>
     </demo-block>
 
-    <demo-block :title="$t('disableMenu')">
+    <demo-block :title="t('disableMenu')">
       <van-dropdown-menu>
         <van-dropdown-item v-model="value1" disabled :options="option1" />
         <van-dropdown-item v-model="value2" disabled :options="option2" />
@@ -97,11 +97,11 @@ export default {
 
   computed: {
     option1() {
-      return this.$t('option1');
+      return this.t('option1');
     },
 
     option2() {
-      return this.$t('option2');
+      return this.t('option2');
     },
   },
 
diff --git a/src/field/demo/Autosize.vue b/src/field/demo/Autosize.vue
index 96d391799..4c0f63513 100644
--- a/src/field/demo/Autosize.vue
+++ b/src/field/demo/Autosize.vue
@@ -1,12 +1,12 @@
 <template>
-  <demo-block :title="$t('autosize')">
+  <demo-block :title="t('autosize')">
     <van-field
       v-model="value"
       autosize
       rows="1"
       type="textarea"
-      :label="$t('message')"
-      :placeholder="$t('placeholder')"
+      :label="t('message')"
+      :placeholder="t('placeholder')"
     />
   </demo-block>
 </template>
diff --git a/src/field/demo/BasicUsage.vue b/src/field/demo/BasicUsage.vue
index 5e436f949..842564c89 100644
--- a/src/field/demo/BasicUsage.vue
+++ b/src/field/demo/BasicUsage.vue
@@ -1,7 +1,7 @@
 <template>
-  <demo-block :title="$t('basicUsage')">
+  <demo-block :title="t('basicUsage')">
     <van-cell-group>
-      <van-field v-model="value" :placeholder="$t('placeholder')" />
+      <van-field v-model="value" :placeholder="t('placeholder')" />
     </van-cell-group>
   </demo-block>
 </template>
diff --git a/src/field/demo/CustomType.vue b/src/field/demo/CustomType.vue
index a23faabc2..1c251a865 100644
--- a/src/field/demo/CustomType.vue
+++ b/src/field/demo/CustomType.vue
@@ -1,33 +1,33 @@
 <template>
-  <demo-block :title="$t('customType')">
+  <demo-block :title="t('customType')">
     <van-field
       v-model="text"
-      :label="$t('text')"
-      :placeholder="$t('textPlaceholder')"
+      :label="t('text')"
+      :placeholder="t('textPlaceholder')"
     />
     <van-field
       v-model="phone"
       type="tel"
-      :label="$t('phone')"
-      :placeholder="$t('phonePlaceholder')"
+      :label="t('phone')"
+      :placeholder="t('phonePlaceholder')"
     />
     <van-field
       v-model="digit"
       type="digit"
-      :label="$t('digit')"
-      :placeholder="$t('digitPlaceholder')"
+      :label="t('digit')"
+      :placeholder="t('digitPlaceholder')"
     />
     <van-field
       v-model="number"
       type="number"
-      :label="$t('number')"
-      :placeholder="$t('numberPlaceholder')"
+      :label="t('number')"
+      :placeholder="t('numberPlaceholder')"
     />
     <van-field
       v-model="password"
       type="password"
-      :label="$t('password')"
-      :placeholder="$t('passwordPlaceholder')"
+      :label="t('password')"
+      :placeholder="t('passwordPlaceholder')"
     />
   </demo-block>
 </template>
diff --git a/src/field/demo/Disabled.vue b/src/field/demo/Disabled.vue
index 9910c63de..3674b5ace 100644
--- a/src/field/demo/Disabled.vue
+++ b/src/field/demo/Disabled.vue
@@ -1,7 +1,7 @@
 <template>
-  <demo-block :title="$t('disabled')">
-    <van-field :value="$t('inputReadonly')" :label="$t('text')" readonly />
-    <van-field :value="$t('inputDisabled')" :label="$t('text')" disabled />
+  <demo-block :title="t('disabled')">
+    <van-field :value="t('inputReadonly')" :label="t('text')" readonly />
+    <van-field :value="t('inputDisabled')" :label="t('text')" disabled />
   </demo-block>
 </template>
 
diff --git a/src/field/demo/ErrorInfo.vue b/src/field/demo/ErrorInfo.vue
index d50d3f71e..ff3703872 100644
--- a/src/field/demo/ErrorInfo.vue
+++ b/src/field/demo/ErrorInfo.vue
@@ -1,18 +1,18 @@
 <template>
-  <demo-block :title="$t('errorInfo')">
+  <demo-block :title="t('errorInfo')">
     <van-field
       v-model="username"
       error
       required
-      :label="$t('username')"
-      :placeholder="$t('usernamePlaceholder')"
+      :label="t('username')"
+      :placeholder="t('usernamePlaceholder')"
     />
     <van-field
       v-model="phone"
       required
-      :label="$t('phone')"
-      :placeholder="$t('phonePlaceholder')"
-      :error-message="$t('phoneError')"
+      :label="t('phone')"
+      :placeholder="t('phonePlaceholder')"
+      :error-message="t('phoneError')"
     />
   </demo-block>
 </template>
diff --git a/src/field/demo/FormatValue.vue b/src/field/demo/FormatValue.vue
index 901fd1f92..b750607b4 100644
--- a/src/field/demo/FormatValue.vue
+++ b/src/field/demo/FormatValue.vue
@@ -1,10 +1,10 @@
 <template>
-  <demo-block v-if="!isWeapp" :title="$t('formatValue')">
+  <demo-block v-if="!isWeapp" :title="t('formatValue')">
     <van-field
       v-model="formatValue"
-      :label="$t('text')"
+      :label="t('text')"
       :formatter="formatter"
-      :placeholder="$t('formatValue')"
+      :placeholder="t('formatValue')"
     />
   </demo-block>
 </template>
diff --git a/src/field/demo/InputAlign.vue b/src/field/demo/InputAlign.vue
index 28d48353e..9a8bd547d 100644
--- a/src/field/demo/InputAlign.vue
+++ b/src/field/demo/InputAlign.vue
@@ -1,9 +1,9 @@
 <template>
-  <demo-block :title="$t('inputAlign')">
+  <demo-block :title="t('inputAlign')">
     <van-field
       v-model="value"
-      :label="$t('text')"
-      :placeholder="$t('alignPlaceHolder')"
+      :label="t('text')"
+      :placeholder="t('alignPlaceHolder')"
       input-align="right"
     />
   </demo-block>
diff --git a/src/field/demo/InsertButton.vue b/src/field/demo/InsertButton.vue
index ffef2b00c..1d1ba881a 100644
--- a/src/field/demo/InsertButton.vue
+++ b/src/field/demo/InsertButton.vue
@@ -1,15 +1,15 @@
 <template>
-  <demo-block :title="$t('insertButton')">
+  <demo-block :title="t('insertButton')">
     <van-field
       v-model="sms"
       center
       clearable
-      :label="$t('sms')"
-      :placeholder="$t('smsPlaceholder')"
+      :label="t('sms')"
+      :placeholder="t('smsPlaceholder')"
     >
       <template #button>
         <van-button size="small" type="primary">
-          {{ $t('sendSMS') }}
+          {{ t('sendSMS') }}
         </van-button>
       </template>
     </van-field>
diff --git a/src/field/demo/ShowIcon.vue b/src/field/demo/ShowIcon.vue
index e3529ab0c..03aafbf17 100644
--- a/src/field/demo/ShowIcon.vue
+++ b/src/field/demo/ShowIcon.vue
@@ -1,18 +1,18 @@
 <template>
-  <demo-block :title="$t('showIcon')">
+  <demo-block :title="t('showIcon')">
     <van-field
       v-model="icon1"
-      :label="$t('text')"
+      :label="t('text')"
       left-icon="smile-o"
       right-icon="warning-o"
-      :placeholder="$t('showIcon')"
+      :placeholder="t('showIcon')"
     />
     <van-field
       v-model="icon2"
       clearable
-      :label="$t('text')"
+      :label="t('text')"
       left-icon="music-o"
-      :placeholder="$t('showClearIcon')"
+      :placeholder="t('showClearIcon')"
     />
   </demo-block>
 </template>
diff --git a/src/field/demo/ShowWordLimit.vue b/src/field/demo/ShowWordLimit.vue
index c51189ecf..44728e01e 100644
--- a/src/field/demo/ShowWordLimit.vue
+++ b/src/field/demo/ShowWordLimit.vue
@@ -1,5 +1,5 @@
 <template>
-  <demo-block v-if="!isWeapp" :title="$t('showWordLimit')">
+  <demo-block v-if="!isWeapp" :title="t('showWordLimit')">
     <van-field
       v-model="value"
       autosize
@@ -7,8 +7,8 @@
       rows="2"
       type="textarea"
       maxlength="50"
-      :label="$t('message')"
-      :placeholder="$t('placeholder')"
+      :label="t('message')"
+      :placeholder="t('placeholder')"
     />
   </demo-block>
 </template>
diff --git a/src/form/demo/BasicUsage.vue b/src/form/demo/BasicUsage.vue
index ede60f5be..a951291d4 100644
--- a/src/form/demo/BasicUsage.vue
+++ b/src/form/demo/BasicUsage.vue
@@ -1,24 +1,24 @@
 <template>
-  <demo-block :title="$t('basicUsage')">
+  <demo-block :title="t('basicUsage')">
     <van-form @submit="onSubmit" @failed="onFailed">
       <van-field
         v-model="username"
         name="username"
-        :label="$t('username')"
-        :rules="[{ required: true, message: $t('requireUsername') }]"
-        :placeholder="$t('username')"
+        :label="t('username')"
+        :rules="[{ required: true, message: t('requireUsername') }]"
+        :placeholder="t('username')"
       />
       <van-field
         v-model="password"
         type="password"
         name="password"
-        :label="$t('password')"
-        :rules="[{ required: true, message: $t('requirePassword') }]"
-        :placeholder="$t('password')"
+        :label="t('password')"
+        :rules="[{ required: true, message: t('requirePassword') }]"
+        :placeholder="t('password')"
       />
       <div style="margin: 16px 16px 0;">
         <van-button round block type="info" native-type="submit">
-          {{ $t('submit') }}
+          {{ t('submit') }}
         </van-button>
       </div>
     </van-form>
diff --git a/src/form/demo/FieldType.vue b/src/form/demo/FieldType.vue
index 06957faed..4cb694a87 100644
--- a/src/form/demo/FieldType.vue
+++ b/src/form/demo/FieldType.vue
@@ -1,59 +1,59 @@
 <template>
-  <demo-block :title="$t('fieldType')">
+  <demo-block :title="t('fieldType')">
     <van-form @submit="onSubmit">
-      <van-field name="switch" :label="$t('switch')">
+      <van-field name="switch" :label="t('switch')">
         <template #input>
           <van-switch v-model="switchChecked" size="20" />
         </template>
       </van-field>
 
-      <van-field name="checkbox" :label="$t('checkbox')">
+      <van-field name="checkbox" :label="t('checkbox')">
         <template #input>
           <van-checkbox v-model="checkbox" shape="square" />
         </template>
       </van-field>
 
-      <van-field name="checkboxGroup" :label="$t('checkboxGroup')">
+      <van-field name="checkboxGroup" :label="t('checkboxGroup')">
         <template #input>
           <van-checkbox-group v-model="checkboxGroup" direction="horizontal">
             <van-checkbox name="1" shape="square">
-              {{ $t('checkbox') }} 1
+              {{ t('checkbox') }} 1
             </van-checkbox>
             <van-checkbox name="2" shape="square">
-              {{ $t('checkbox') }} 2
+              {{ t('checkbox') }} 2
             </van-checkbox>
           </van-checkbox-group>
         </template>
       </van-field>
 
-      <van-field name="radio" :label="$t('radio')">
+      <van-field name="radio" :label="t('radio')">
         <template #input>
           <van-radio-group v-model="radio" direction="horizontal">
-            <van-radio name="1">{{ $t('radio') }} 1</van-radio>
-            <van-radio name="2">{{ $t('radio') }} 2</van-radio>
+            <van-radio name="1">{{ t('radio') }} 1</van-radio>
+            <van-radio name="2">{{ t('radio') }} 2</van-radio>
           </van-radio-group>
         </template>
       </van-field>
 
-      <van-field name="stepper" :label="$t('stepper')">
+      <van-field name="stepper" :label="t('stepper')">
         <template #input>
           <van-stepper v-model="stepper" />
         </template>
       </van-field>
 
-      <van-field name="rate" :label="$t('rate')">
+      <van-field name="rate" :label="t('rate')">
         <template #input>
           <van-rate v-model="rate" />
         </template>
       </van-field>
 
-      <van-field name="slider" :label="$t('slider')">
+      <van-field name="slider" :label="t('slider')">
         <template #input>
           <van-slider v-model="slider" />
         </template>
       </van-field>
 
-      <van-field name="uploader" :label="$t('uploader')">
+      <van-field name="uploader" :label="t('uploader')">
         <template #input>
           <van-uploader v-model="uploader" max-count="2" />
         </template>
@@ -66,7 +66,7 @@
 
       <div style="margin: 16px 16px 0;">
         <van-button round block type="info" native-type="submit">
-          {{ $t('submit') }}
+          {{ t('submit') }}
         </van-button>
       </div>
     </van-form>
diff --git a/src/form/demo/FieldTypeArea.vue b/src/form/demo/FieldTypeArea.vue
index 99243ef56..82bf4b5b5 100644
--- a/src/form/demo/FieldTypeArea.vue
+++ b/src/form/demo/FieldTypeArea.vue
@@ -6,13 +6,13 @@
       name="area"
       :value="value"
       :border="false"
-      :label="$t('picker')"
-      :placeholder="$t('placeholder')"
+      :label="t('picker')"
+      :placeholder="t('placeholder')"
       @click="showArea = true"
     />
     <van-popup v-model="showArea" position="bottom">
       <van-area
-        :area-list="$t('areaList')"
+        :area-list="t('areaList')"
         @confirm="onConfirm"
         @cancel="onCancel"
       />
diff --git a/src/form/demo/FieldTypeCalendar.vue b/src/form/demo/FieldTypeCalendar.vue
index c971e008f..e73e82504 100644
--- a/src/form/demo/FieldTypeCalendar.vue
+++ b/src/form/demo/FieldTypeCalendar.vue
@@ -5,8 +5,8 @@
       clickable
       name="calendar"
       :value="value"
-      :label="$t('calendar')"
-      :placeholder="$t('placeholder')"
+      :label="t('calendar')"
+      :placeholder="t('placeholder')"
       @click="showCalendar = true"
     />
     <van-calendar v-model="showCalendar" @confirm="onConfirm" />
diff --git a/src/form/demo/FieldTypeDatetimePicker.vue b/src/form/demo/FieldTypeDatetimePicker.vue
index dfc8facef..3c844df0d 100644
--- a/src/form/demo/FieldTypeDatetimePicker.vue
+++ b/src/form/demo/FieldTypeDatetimePicker.vue
@@ -6,8 +6,8 @@
       name="datetimePicker"
       :value="value"
       :border="false"
-      :label="$t('label')"
-      :placeholder="$t('placeholder')"
+      :label="t('label')"
+      :placeholder="t('placeholder')"
       @click="showPicker = true"
     />
     <van-popup v-model="showPicker" position="bottom">
diff --git a/src/form/demo/FieldTypePicker.vue b/src/form/demo/FieldTypePicker.vue
index 921607160..38a57fcc7 100644
--- a/src/form/demo/FieldTypePicker.vue
+++ b/src/form/demo/FieldTypePicker.vue
@@ -6,14 +6,14 @@
       name="picker"
       :value="value"
       :border="false"
-      :label="$t('picker')"
-      :placeholder="$t('placeholder')"
+      :label="t('picker')"
+      :placeholder="t('placeholder')"
       @click="showPicker = true"
     />
     <van-popup v-model="showPicker" position="bottom">
       <van-picker
         show-toolbar
-        :columns="$t('textColumns')"
+        :columns="t('textColumns')"
         @confirm="onConfirm"
         @cancel="onCancel"
       />
diff --git a/src/form/demo/ValidateRules.vue b/src/form/demo/ValidateRules.vue
index 275a2158c..a042f7ad3 100644
--- a/src/form/demo/ValidateRules.vue
+++ b/src/form/demo/ValidateRules.vue
@@ -1,30 +1,30 @@
 <template>
-  <demo-block :title="$t('title')">
+  <demo-block :title="t('title')">
     <van-form validate-first @sumbit="onSubmit" @failed="onFailed">
       <van-field
         v-model="value1"
         name="pattern"
-        :label="$t('label')"
-        :rules="[{ pattern, message: $t('message') }]"
-        :placeholder="$t('pattern')"
+        :label="t('label')"
+        :rules="[{ pattern, message: t('message') }]"
+        :placeholder="t('pattern')"
       />
       <van-field
         v-model="value2"
         name="validator"
-        :label="$t('label')"
-        :rules="[{ validator, message: $t('message') }]"
-        :placeholder="$t('validator')"
+        :label="t('label')"
+        :rules="[{ validator, message: t('message') }]"
+        :placeholder="t('validator')"
       />
       <van-field
         v-model="value3"
         name="asyncValidator"
-        :label="$t('label')"
-        :rules="[{ validator: asyncValidator, message: $t('message') }]"
-        :placeholder="$t('asyncValidator')"
+        :label="t('label')"
+        :rules="[{ validator: asyncValidator, message: t('message') }]"
+        :placeholder="t('asyncValidator')"
       />
       <div style="margin: 16px 16px 0;">
         <van-button round block type="info" native-type="submit">
-          {{ $t('submit') }}
+          {{ t('submit') }}
         </van-button>
       </div>
     </van-form>
@@ -72,7 +72,7 @@ export default {
 
     asyncValidator(val) {
       return new Promise(resolve => {
-        this.$toast.loading(this.$t('validating'));
+        this.$toast.loading(this.t('validating'));
 
         setTimeout(() => {
           this.$toast.clear();
diff --git a/src/goods-action/demo/index.vue b/src/goods-action/demo/index.vue
index a957bdd34..181ee75d3 100644
--- a/src/goods-action/demo/index.vue
+++ b/src/goods-action/demo/index.vue
@@ -1,71 +1,71 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-goods-action>
         <van-goods-action-icon
           icon="chat-o"
-          :text="$t('icon1')"
+          :text="t('icon1')"
           @click="onClickIcon"
         />
         <van-goods-action-icon
           icon="cart-o"
-          :text="$t('icon2')"
+          :text="t('icon2')"
           @click="onClickIcon"
         />
         <van-goods-action-button
           type="warning"
-          :text="$t('button1')"
+          :text="t('button1')"
           @click="onClickButton"
         />
         <van-goods-action-button
           type="danger"
-          :text="$t('button2')"
+          :text="t('button2')"
           @click="onClickButton"
         />
       </van-goods-action>
     </demo-block>
 
-    <demo-block :title="$t('iconBadge')">
+    <demo-block :title="t('iconBadge')">
       <van-goods-action>
-        <van-goods-action-icon icon="chat-o" dot :text="$t('icon1')" />
-        <van-goods-action-icon icon="cart-o" badge="5" :text="$t('icon2')" />
-        <van-goods-action-icon icon="shop-o" badge="12" :text="$t('icon3')" />
-        <van-goods-action-button type="warning" :text="$t('button1')" />
-        <van-goods-action-button type="danger" :text="$t('button2')" />
+        <van-goods-action-icon icon="chat-o" dot :text="t('icon1')" />
+        <van-goods-action-icon icon="cart-o" badge="5" :text="t('icon2')" />
+        <van-goods-action-icon icon="shop-o" badge="12" :text="t('icon3')" />
+        <van-goods-action-button type="warning" :text="t('button1')" />
+        <van-goods-action-button type="danger" :text="t('button2')" />
       </van-goods-action>
     </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="$t('customIconColor')">
+    <demo-block v-if="!isWeapp" :title="t('customIconColor')">
       <van-goods-action>
         <van-goods-action-icon
           icon="chat-o"
-          :text="$t('icon1')"
+          :text="t('icon1')"
           color="#07c160"
         />
-        <van-goods-action-icon icon="cart-o" :text="$t('icon2')" />
+        <van-goods-action-icon icon="cart-o" :text="t('icon2')" />
         <van-goods-action-icon
           icon="star"
-          :text="$t('collected')"
+          :text="t('collected')"
           color="#ff5000"
         />
-        <van-goods-action-button type="warning" :text="$t('button1')" />
-        <van-goods-action-button type="danger" :text="$t('button2')" />
+        <van-goods-action-button type="warning" :text="t('button1')" />
+        <van-goods-action-button type="danger" :text="t('button2')" />
       </van-goods-action>
     </demo-block>
 
-    <demo-block :title="$t('customButtonColor')">
+    <demo-block :title="t('customButtonColor')">
       <van-goods-action>
-        <van-goods-action-icon icon="chat-o" :text="$t('icon1')" />
-        <van-goods-action-icon icon="cart-o" :text="$t('icon2')" />
+        <van-goods-action-icon icon="chat-o" :text="t('icon1')" />
+        <van-goods-action-icon icon="cart-o" :text="t('icon2')" />
         <van-goods-action-button
           color="#be99ff"
           type="warning"
-          :text="$t('button1')"
+          :text="t('button1')"
         />
         <van-goods-action-button
           color="#7232dd"
           type="danger"
-          :text="$t('button2')"
+          :text="t('button2')"
         />
       </van-goods-action>
     </demo-block>
@@ -104,10 +104,10 @@ export default {
   },
   methods: {
     onClickIcon() {
-      this.$toast(this.$t('clickIcon'));
+      this.$toast(this.t('clickIcon'));
     },
     onClickButton() {
-      this.$toast(this.$t('clickButton'));
+      this.$toast(this.t('clickButton'));
     },
   },
 };
diff --git a/src/grid/demo/index.vue b/src/grid/demo/index.vue
index 576df01fb..241f0e69b 100644
--- a/src/grid/demo/index.vue
+++ b/src/grid/demo/index.vue
@@ -1,28 +1,28 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-grid>
         <van-grid-item
           v-for="i in 4"
           :key="i"
           icon="photo-o"
-          :text="$t('text')"
+          :text="t('text')"
         />
       </van-grid>
     </demo-block>
 
-    <demo-block :title="$t('columnNum')">
+    <demo-block :title="t('columnNum')">
       <van-grid :column-num="3">
         <van-grid-item
           v-for="i in 6"
           :key="i"
           icon="photo-o"
-          :text="$t('text')"
+          :text="t('text')"
         />
       </van-grid>
     </demo-block>
 
-    <demo-block :title="$t('customContent')">
+    <demo-block :title="t('customContent')">
       <van-grid :border="false" :column-num="3">
         <van-grid-item>
           <van-image
@@ -45,43 +45,43 @@
       </van-grid>
     </demo-block>
 
-    <demo-block :title="$t('square')">
+    <demo-block :title="t('square')">
       <van-grid square>
         <van-grid-item
           v-for="i in 8"
           :key="i"
           icon="photo-o"
-          :text="$t('text')"
+          :text="t('text')"
         />
       </van-grid>
     </demo-block>
 
-    <demo-block :title="$t('gutter')">
+    <demo-block :title="t('gutter')">
       <van-grid :gutter="10">
         <van-grid-item
           v-for="i in 8"
           :key="i"
           icon="photo-o"
-          :text="$t('text')"
+          :text="t('text')"
         />
       </van-grid>
     </demo-block>
 
-    <demo-block :title="$t('route')">
+    <demo-block :title="t('route')">
       <van-grid clickable :column-num="2">
-        <van-grid-item icon="home-o" :text="$t('vueRoute')" to="/" />
+        <van-grid-item icon="home-o" :text="t('vueRoute')" to="/" />
         <van-grid-item
           icon="search"
-          :text="$t('urlRoute')"
+          :text="t('urlRoute')"
           url="/vant/mobile.html"
         />
       </van-grid>
     </demo-block>
 
-    <demo-block :title="$t('showBadge')">
+    <demo-block :title="t('showBadge')">
       <van-grid :column-num="2">
-        <van-grid-item icon="home-o" :text="$t('text')" dot />
-        <van-grid-item icon="search" :text="$t('text')" badge="99+" />
+        <van-grid-item icon="home-o" :text="t('text')" dot />
+        <van-grid-item icon="search" :text="t('text')" badge="99+" />
       </van-grid>
     </demo-block>
   </demo-section>
diff --git a/src/icon/demo/index.vue b/src/icon/demo/index.vue
index e25cffc59..9b37e53c1 100644
--- a/src/icon/demo/index.vue
+++ b/src/icon/demo/index.vue
@@ -1,8 +1,8 @@
 <template>
   <demo-section>
     <van-tabs v-model="tab" sticky :color="BLUE">
-      <van-tab :title="$t('demo')">
-        <demo-block :title="$t('basicUsage')">
+      <van-tab :title="t('demo')">
+        <demo-block :title="t('basicUsage')">
           <van-col span="6" @click="copy(demoIcon)">
             <van-icon :name="demoIcon" />
           </van-col>
@@ -11,7 +11,7 @@
           </van-col>
         </demo-block>
 
-        <demo-block :title="$t('badge')">
+        <demo-block :title="t('badge')">
           <van-col span="6" @click="copy(demoIcon, { dot: true })">
             <van-icon :name="demoIcon" dot />
           </van-col>
@@ -23,7 +23,7 @@
           </van-col>
         </demo-block>
 
-        <demo-block :title="$t('color')">
+        <demo-block :title="t('color')">
           <van-col span="6" @click="copy(demoIcon, { color: BLUE })">
             <van-icon :name="demoIcon" :color="BLUE" />
           </van-col>
@@ -32,7 +32,7 @@
           </van-col>
         </demo-block>
 
-        <demo-block :title="$t('size')">
+        <demo-block :title="t('size')">
           <van-col span="6" @click="copy(demoIcon, { size: '40' })">
             <van-icon :name="demoIcon" size="40" />
           </van-col>
@@ -42,7 +42,7 @@
         </demo-block>
       </van-tab>
 
-      <van-tab :title="$t('basic')">
+      <van-tab :title="t('basic')">
         <van-col
           v-for="icon in icons.basic"
           :key="icon"
@@ -54,7 +54,7 @@
         </van-col>
       </van-tab>
 
-      <van-tab :title="$t('outline')">
+      <van-tab :title="t('outline')">
         <van-col
           v-for="icon in icons.outline"
           :key="icon"
@@ -66,7 +66,7 @@
         </van-col>
       </van-tab>
 
-      <van-tab :title="$t('filled')">
+      <van-tab :title="t('filled')">
         <van-col
           v-for="icon in icons.filled"
           :key="icon"
@@ -168,7 +168,7 @@ export default {
         type: 'success',
         duration: 1500,
         className: 'demo-icon-notify',
-        message: `${this.$t('copied')}：${tag}`,
+        message: `${this.t('copied')}：${tag}`,
       });
     },
   },
diff --git a/src/image-preview/demo/index.vue b/src/image-preview/demo/index.vue
index f3ef3fa9e..4aa337ca7 100644
--- a/src/image-preview/demo/index.vue
+++ b/src/image-preview/demo/index.vue
@@ -1,35 +1,35 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-button type="primary" @click="showImagePreview">
-        {{ $t('button1') }}
+        {{ t('button1') }}
       </van-button>
     </demo-block>
 
-    <demo-block :title="$t('button2')">
+    <demo-block :title="t('button2')">
       <van-button type="primary" @click="showImagePreview(1)">
-        {{ $t('button2') }}
+        {{ t('button2') }}
       </van-button>
     </demo-block>
 
-    <demo-block :title="$t('button4')">
+    <demo-block :title="t('button4')">
       <van-button type="primary" @click="showImagePreview(0, 0, true)">
-        {{ $t('button4') }}
+        {{ t('button4') }}
       </van-button>
     </demo-block>
 
-    <demo-block :title="$t('button3')">
+    <demo-block :title="t('button3')">
       <van-button type="primary" @click="showImagePreview(0, 3000)">
-        {{ $t('button3') }}
+        {{ t('button3') }}
       </van-button>
     </demo-block>
 
-    <demo-block :title="$t('componentCall')">
+    <demo-block :title="t('componentCall')">
       <van-button type="primary" @click="componentCall">
-        {{ $t('componentCall') }}
+        {{ t('componentCall') }}
       </van-button>
       <van-image-preview v-model="show" :images="images" @change="onChange">
-        <template #index>{{ $t('index', index) }}</template>
+        <template #index>{{ t('index', index) }}</template>
       </van-image-preview>
     </demo-block>
   </demo-section>
diff --git a/src/image/demo/index.vue b/src/image/demo/index.vue
index 54af0dcc1..c3abac32f 100644
--- a/src/image/demo/index.vue
+++ b/src/image/demo/index.vue
@@ -1,12 +1,12 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-row>
         <van-image width="100" height="100" :src="image" />
       </van-row>
     </demo-block>
 
-    <demo-block :title="$t('fitMode')">
+    <demo-block :title="t('fitMode')">
       <van-row gutter="20">
         <van-col v-for="fit in fits" span="8" :key="fit">
           <van-image :fit="fit" width="100%" height="27vw" :src="image" />
@@ -15,7 +15,7 @@
       </van-row>
     </demo-block>
 
-    <demo-block :title="$t('round')">
+    <demo-block :title="t('round')">
       <van-row gutter="20">
         <van-col v-for="fit in fits" span="8" :key="fit">
           <van-image round :fit="fit" width="100%" height="27vw" :src="image" />
@@ -24,11 +24,11 @@
       </van-row>
     </demo-block>
 
-    <demo-block :title="$t('loading')">
+    <demo-block :title="t('loading')">
       <van-row gutter="20">
         <van-col span="8">
           <van-image width="100%" height="27vw" />
-          <div class="text">{{ $t('defaultTip') }}</div>
+          <div class="text">{{ t('defaultTip') }}</div>
         </van-col>
 
         <van-col span="8">
@@ -37,23 +37,23 @@
               <van-loading type="spinner" size="20" />
             </template>
           </van-image>
-          <div class="text">{{ $t('customTip') }}</div>
+          <div class="text">{{ t('customTip') }}</div>
         </van-col>
       </van-row>
     </demo-block>
 
-    <demo-block :title="$t('error')">
+    <demo-block :title="t('error')">
       <van-row gutter="20">
         <van-col span="8">
           <van-image width="100%" height="27vw" src="x" />
-          <div class="text">{{ $t('defaultTip') }}</div>
+          <div class="text">{{ t('defaultTip') }}</div>
         </van-col>
 
         <van-col span="8">
           <van-image width="100%" height="27vw" src="x">
-            <template #error>{{ $t('loadFail') }}</template>
+            <template #error>{{ t('loadFail') }}</template>
           </van-image>
-          <div class="text">{{ $t('customTip') }}</div>
+          <div class="text">{{ t('customTip') }}</div>
         </van-col>
       </van-row>
     </demo-block>
diff --git a/src/index-bar/demo/index.vue b/src/index-bar/demo/index.vue
index 67c08ee4f..0981e9fd4 100644
--- a/src/index-bar/demo/index.vue
+++ b/src/index-bar/demo/index.vue
@@ -1,26 +1,26 @@
 <template>
   <demo-section>
     <van-tabs v-model="activeTab" :color="BLUE">
-      <van-tab :title="$t('basicUsage')">
+      <van-tab :title="t('basicUsage')">
         <van-index-bar>
           <div v-for="index in indexList" :key="index">
             <van-index-anchor :index="index" />
-            <van-cell :title="$t('text')" />
-            <van-cell :title="$t('text')" />
-            <van-cell :title="$t('text')" />
+            <van-cell :title="t('text')" />
+            <van-cell :title="t('text')" />
+            <van-cell :title="t('text')" />
           </div>
         </van-index-bar>
       </van-tab>
 
-      <van-tab :title="$t('customIndexList')">
+      <van-tab :title="t('customIndexList')">
         <van-index-bar :index-list="customIndexList">
           <div v-for="index in customIndexList" :key="index">
             <van-index-anchor :index="index">
-              {{ $t('title') + index }}
+              {{ t('title') + index }}
             </van-index-anchor>
-            <van-cell :title="$t('text')" />
-            <van-cell :title="$t('text')" />
-            <van-cell :title="$t('text')" />
+            <van-cell :title="t('text')" />
+            <van-cell :title="t('text')" />
+            <van-cell :title="t('text')" />
           </div>
         </van-index-bar>
       </van-tab>
diff --git a/src/lazyload/demo/index.vue b/src/lazyload/demo/index.vue
index 32da08bbd..1bc3b4f9e 100644
--- a/src/lazyload/demo/index.vue
+++ b/src/lazyload/demo/index.vue
@@ -1,14 +1,14 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <img v-for="img in imageList" v-lazy="img" />
     </demo-block>
 
-    <demo-block :title="$t('title2')">
+    <demo-block :title="t('title2')">
       <div v-for="img in backgroundImageList" v-lazy:background-image="img" />
     </demo-block>
 
-    <demo-block :title="$t('title3')">
+    <demo-block :title="t('title3')">
       <lazy-component>
         <img v-for="img in componentImageList" v-lazy="img" />
       </lazy-component>
diff --git a/src/list/demo/index.vue b/src/list/demo/index.vue
index 0a25c2005..0d956b81f 100644
--- a/src/list/demo/index.vue
+++ b/src/list/demo/index.vue
@@ -1,35 +1,35 @@
 <template>
   <demo-section>
     <van-tabs>
-      <van-tab :title="$t('basicUsage')">
+      <van-tab :title="t('basicUsage')">
         <van-list
           v-model="list[0].loading"
           :finished="list[0].finished"
-          :finished-text="$t('finishedText')"
+          :finished-text="t('finishedText')"
           @load="onLoad(0)"
         >
           <van-cell v-for="item in list[0].items" :key="item" :title="item" />
         </van-list>
       </van-tab>
 
-      <van-tab :title="$t('errorInfo')">
+      <van-tab :title="t('errorInfo')">
         <van-list
           v-model="list[1].loading"
           :finished="list[1].finished"
           :error.sync="list[1].error"
-          :error-text="$t('errorText')"
+          :error-text="t('errorText')"
           @load="onLoad(1)"
         >
           <van-cell v-for="item in list[1].items" :key="item" :title="item" />
         </van-list>
       </van-tab>
 
-      <van-tab :title="$t('pullRefresh')">
+      <van-tab :title="t('pullRefresh')">
         <van-pull-refresh v-model="list[2].refreshing" @refresh="onRefresh(2)">
           <van-list
             v-model="list[2].loading"
             :finished="list[2].finished"
-            :finished-text="$t('finishedText')"
+            :finished-text="t('finishedText')"
             @load="onLoad(2)"
           >
             <van-cell v-for="item in list[2].items" :key="item" :title="item" />
diff --git a/src/loading/demo/index.vue b/src/loading/demo/index.vue
index 1362e5f7f..16cb624ab 100644
--- a/src/loading/demo/index.vue
+++ b/src/loading/demo/index.vue
@@ -1,29 +1,29 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('type')">
+    <demo-block :title="t('type')">
       <van-loading />
       <van-loading type="spinner" />
     </demo-block>
 
-    <demo-block :title="$t('color')">
+    <demo-block :title="t('color')">
       <van-loading color="#1989fa" />
       <van-loading type="spinner" color="#1989fa" />
     </demo-block>
 
-    <demo-block :title="$t('size')">
+    <demo-block :title="t('size')">
       <van-loading size="24" />
       <van-loading type="spinner" size="24" />
     </demo-block>
 
-    <demo-block :title="$t('text')">
+    <demo-block :title="t('text')">
       <van-loading size="24px">
-        {{ $t('loading') }}
+        {{ t('loading') }}
       </van-loading>
     </demo-block>
 
-    <demo-block :title="$t('vertical')">
+    <demo-block :title="t('vertical')">
       <van-loading size="24px" vertical>
-        {{ $t('loading') }}
+        {{ t('loading') }}
       </van-loading>
     </demo-block>
   </demo-section>
diff --git a/src/nav-bar/demo/index.vue b/src/nav-bar/demo/index.vue
index e0cc34982..9b6b85c4f 100644
--- a/src/nav-bar/demo/index.vue
+++ b/src/nav-bar/demo/index.vue
@@ -1,18 +1,18 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-nav-bar
-        :title="$t('title')"
-        :left-text="$t('back')"
-        :right-text="$t('button')"
+        :title="t('title')"
+        :left-text="t('back')"
+        :right-text="t('button')"
         left-arrow
         @click-left="onClickLeft"
         @click-right="onClickRight"
       />
     </demo-block>
 
-    <demo-block :title="$t('advancedUsage')">
-      <van-nav-bar :title="$t('title')" :left-text="$t('back')" left-arrow>
+    <demo-block :title="t('advancedUsage')">
+      <van-nav-bar :title="t('title')" :left-text="t('back')" left-arrow>
         <template #right>
           <van-icon name="search" />
         </template>
@@ -25,10 +25,10 @@
 export default {
   methods: {
     onClickLeft() {
-      this.$toast(this.$t('back'));
+      this.$toast(this.t('back'));
     },
     onClickRight() {
-      this.$toast(this.$t('button'));
+      this.$toast(this.t('button'));
     },
   },
 };
diff --git a/src/notice-bar/demo/index.vue b/src/notice-bar/demo/index.vue
index 4b0954ee5..483bc8474 100644
--- a/src/notice-bar/demo/index.vue
+++ b/src/notice-bar/demo/index.vue
@@ -1,25 +1,25 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
-      <van-notice-bar :text="$t('text')" left-icon="volume-o" />
+    <demo-block :title="t('basicUsage')">
+      <van-notice-bar :text="t('text')" left-icon="volume-o" />
     </demo-block>
 
-    <demo-block :title="$t('unscrollable')">
-      <van-notice-bar :scrollable="false" :text="$t('text')" />
+    <demo-block :title="t('unscrollable')">
+      <van-notice-bar :scrollable="false" :text="t('text')" />
     </demo-block>
 
-    <demo-block :title="$t('wrapable')">
-      <van-notice-bar wrapable :scrollable="false" :text="$t('text')" />
+    <demo-block :title="t('wrapable')">
+      <van-notice-bar wrapable :scrollable="false" :text="t('text')" />
     </demo-block>
 
-    <demo-block :title="$t('mode')">
-      <van-notice-bar mode="closeable" :text="$t('text')" />
-      <van-notice-bar mode="link" :text="$t('text')" />
+    <demo-block :title="t('mode')">
+      <van-notice-bar mode="closeable" :text="t('text')" />
+      <van-notice-bar mode="link" :text="t('text')" />
     </demo-block>
 
-    <demo-block :title="$t('customStyle')">
+    <demo-block :title="t('customStyle')">
       <van-notice-bar
-        :text="$t('text')"
+        :text="t('text')"
         color="#1989fa"
         background="#ecf9ff"
         left-icon="info-o"
diff --git a/src/notify/demo/index.vue b/src/notify/demo/index.vue
index efa1c512f..3134c357f 100644
--- a/src/notify/demo/index.vue
+++ b/src/notify/demo/index.vue
@@ -1,44 +1,44 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
-      <van-button type="danger" :text="$t('basicUsage')" @click="showNotify" />
+    <demo-block :title="t('basicUsage')">
+      <van-button type="danger" :text="t('basicUsage')" @click="showNotify" />
     </demo-block>
 
-    <demo-block :title="$t('notifyType')">
+    <demo-block :title="t('notifyType')">
       <div style="margin-bottom: 15px;">
         <van-button
           type="info"
-          :text="$t('primary')"
+          :text="t('primary')"
           @click="showType('primary')"
         />
         <van-button
           type="primary"
-          :text="$t('success')"
+          :text="t('success')"
           @click="showType('success')"
         />
       </div>
 
       <van-button
         type="danger"
-        :text="$t('danger')"
+        :text="t('danger')"
         @click="showType('danger')"
       />
       <van-button
         type="warning"
-        :text="$t('warning')"
+        :text="t('warning')"
         @click="showType('warning')"
       />
     </demo-block>
 
-    <demo-block :title="$t('customNotify')">
+    <demo-block :title="t('customNotify')">
       <van-button
         type="primary"
-        :text="$t('customColor')"
+        :text="t('customColor')"
         @click="showCustomColor"
       />
       <van-button
         type="primary"
-        :text="$t('customDuration')"
+        :text="t('customDuration')"
         @click="showCustomDuration"
       />
     </demo-block>
@@ -74,12 +74,12 @@ export default {
 
   methods: {
     showNotify() {
-      this.$notify(this.$t('content'));
+      this.$notify(this.t('content'));
     },
 
     showCustomColor() {
       this.$notify({
-        message: this.$t('customColor'),
+        message: this.t('customColor'),
         color: '#ad0000',
         background: '#ffe1e1',
       });
@@ -87,14 +87,14 @@ export default {
 
     showCustomDuration() {
       this.$notify({
-        message: this.$t('customDuration'),
+        message: this.t('customDuration'),
         duration: 1000,
       });
     },
 
     showType(type) {
       this.$notify({
-        message: this.$t('content'),
+        message: this.t('content'),
         type,
       });
     },
diff --git a/src/number-keyboard/demo/index.vue b/src/number-keyboard/demo/index.vue
index 767370653..782c03201 100644
--- a/src/number-keyboard/demo/index.vue
+++ b/src/number-keyboard/demo/index.vue
@@ -1,13 +1,13 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('default')">
+    <demo-block :title="t('default')">
       <van-button type="primary" @touchstart.stop="keyboard = 'default'">
-        {{ $t('button1') }}
+        {{ t('button1') }}
       </van-button>
 
       <van-number-keyboard
         :show="keyboard === 'default'"
-        :close-button-text="$t('close')"
+        :close-button-text="t('close')"
         extra-key="."
         @blur="keyboard = ''"
         @input="onInput"
@@ -15,14 +15,14 @@
       />
     </demo-block>
 
-    <demo-block :title="$t('custom')">
+    <demo-block :title="t('custom')">
       <van-button type="info" @touchstart.stop="keyboard = 'custom'">
-        {{ $t('button2') }}
+        {{ t('button2') }}
       </van-button>
 
       <van-number-keyboard
         :show="keyboard === 'custom'"
-        :close-button-text="$t('close')"
+        :close-button-text="t('close')"
         theme="custom"
         extra-key="."
         @blur="keyboard = ''"
@@ -31,12 +31,12 @@
       />
     </demo-block>
 
-    <demo-block :title="$t('bindValue')">
+    <demo-block :title="t('bindValue')">
       <van-field
         readonly
         clickable
         :value="value"
-        :placeholder="$t('clickToInput')"
+        :placeholder="t('clickToInput')"
         @touchstart.native.stop="keyboard = 'bindValue'"
       />
 
@@ -48,14 +48,14 @@
       />
     </demo-block>
 
-    <demo-block :title="$t('extraKey')">
+    <demo-block :title="t('extraKey')">
       <van-button plain type="primary" @touchstart.stop="keyboard = 'extraKey'">
-        {{ $t('button3') }}
+        {{ t('button3') }}
       </van-button>
 
       <van-number-keyboard
         :show="keyboard === 'extraKey'"
-        :close-button-text="$t('close')"
+        :close-button-text="t('close')"
         extra-key="X"
         @blur="keyboard = ''"
         @input="onInput"
@@ -63,15 +63,15 @@
       />
     </demo-block>
 
-    <demo-block :title="$t('title')">
+    <demo-block :title="t('title')">
       <van-button plain type="info" @touchstart.stop="keyboard = 'title'">
-        {{ $t('button4') }}
+        {{ t('button4') }}
       </van-button>
 
       <van-number-keyboard
         :show="keyboard === 'title'"
-        :close-button-text="$t('close')"
-        :title="$t('title')"
+        :close-button-text="t('close')"
+        :title="t('title')"
         extra-key="."
         @blur="keyboard = ''"
         @input="onInput"
@@ -123,11 +123,11 @@ export default {
 
   methods: {
     onInput(value) {
-      this.$toast(`${this.$t('input')}: ${value}`);
+      this.$toast(`${this.t('input')}: ${value}`);
     },
 
     onDelete() {
-      this.$toast(this.$t('delete'));
+      this.$toast(this.t('delete'));
     },
   },
 };
diff --git a/src/overlay/demo/index.vue b/src/overlay/demo/index.vue
index dc79660a2..a919f4f8c 100644
--- a/src/overlay/demo/index.vue
+++ b/src/overlay/demo/index.vue
@@ -1,9 +1,9 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-button
         type="primary"
-        :text="$t('showOverlay')"
+        :text="t('showOverlay')"
         style="margin-left: 16px;"
         @click="show = true"
       />
@@ -11,10 +11,10 @@
       <van-overlay :show="show" @click="show = false" />
     </demo-block>
 
-    <demo-block :title="$t('embeddedContent')">
+    <demo-block :title="t('embeddedContent')">
       <van-button
         type="primary"
-        :text="$t('embeddedContent')"
+        :text="t('embeddedContent')"
         style="margin-left: 16px;"
         @click="showEmbedded = true"
       />
diff --git a/src/pagination/demo/index.vue b/src/pagination/demo/index.vue
index b7daa9362..ddeecf243 100644
--- a/src/pagination/demo/index.vue
+++ b/src/pagination/demo/index.vue
@@ -1,34 +1,34 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-pagination
         v-model="currentPage1"
         :total-items="24"
         :items-per-page="5"
-        :prev-text="$t('prevText')"
-        :next-text="$t('nextText')"
+        :prev-text="t('prevText')"
+        :next-text="t('nextText')"
       />
     </demo-block>
 
-    <demo-block :title="$t('title2')">
+    <demo-block :title="t('title2')">
       <van-pagination
         v-model="currentPage2"
         :page-count="12"
-        :prev-text="$t('prevText')"
-        :next-text="$t('nextText')"
+        :prev-text="t('prevText')"
+        :next-text="t('nextText')"
         mode="simple"
         size="small"
       />
     </demo-block>
 
-    <demo-block :title="$t('title3')">
+    <demo-block :title="t('title3')">
       <van-pagination
         force-ellipses
         v-model="currentPage3"
         :total-items="125"
         :show-page-size="3"
-        :prev-text="$t('prevText')"
-        :next-text="$t('nextText')"
+        :prev-text="t('prevText')"
+        :next-text="t('nextText')"
       />
     </demo-block>
   </demo-section>
diff --git a/src/panel/demo/index.vue b/src/panel/demo/index.vue
index baa075342..afbb25f35 100644
--- a/src/panel/demo/index.vue
+++ b/src/panel/demo/index.vue
@@ -1,18 +1,18 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
-      <van-panel :title="$t('title')" :desc="$t('desc')" :status="$t('status')">
-        <div>{{ $t('content') }}</div>
+    <demo-block :title="t('basicUsage')">
+      <van-panel :title="t('title')" :desc="t('desc')" :status="t('status')">
+        <div>{{ t('content') }}</div>
       </van-panel>
     </demo-block>
 
-    <demo-block :title="$t('advancedUsage')">
-      <van-panel :title="$t('title')" :desc="$t('desc')" :status="$t('status')">
-        <div>{{ $t('content') }}</div>
+    <demo-block :title="t('advancedUsage')">
+      <van-panel :title="t('title')" :desc="t('desc')" :status="t('status')">
+        <div>{{ t('content') }}</div>
         <template #footer>
-          <van-button size="small">{{ $t('button') }}</van-button>
+          <van-button size="small">{{ t('button') }}</van-button>
           <van-button size="small" type="danger">
-            {{ $t('button') }}
+            {{ t('button') }}
           </van-button>
         </template>
       </van-panel>
diff --git a/src/password-input/demo/index.vue b/src/password-input/demo/index.vue
index 1455b9c45..d321ade5e 100644
--- a/src/password-input/demo/index.vue
+++ b/src/password-input/demo/index.vue
@@ -1,9 +1,9 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-password-input
         :value="value1"
-        :info="$t('info')"
+        :info="t('info')"
         :focused="keyboard === 'value1'"
         @focus="keyboard = 'value1'"
       />
@@ -16,7 +16,7 @@
       />
     </demo-block>
 
-    <demo-block :title="$t('customLength')">
+    <demo-block :title="t('customLength')">
       <van-password-input
         :value="value2"
         :length="4"
@@ -26,7 +26,7 @@
       />
     </demo-block>
 
-    <demo-block :title="$t('removeMask')">
+    <demo-block :title="t('removeMask')">
       <van-password-input
         :value="value3"
         :mask="false"
@@ -35,7 +35,7 @@
       />
     </demo-block>
 
-    <demo-block :title="$t('hintError')">
+    <demo-block :title="t('hintError')">
       <van-password-input
         :value="value4"
         :error-info="errorInfo"
@@ -81,7 +81,7 @@ export default {
       const { keyboard } = this;
       this[keyboard] = (this[keyboard] + key).slice(0, 6);
       if (this[keyboard].length === 6) {
-        this.errorInfo = this.$t('errorInfo');
+        this.errorInfo = this.t('errorInfo');
       } else {
         this.errorInfo = '';
       }
diff --git a/src/picker/demo/index.vue b/src/picker/demo/index.vue
index a793d5c1f..f904ac4fb 100644
--- a/src/picker/demo/index.vue
+++ b/src/picker/demo/index.vue
@@ -1,72 +1,72 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
-      <van-picker :columns="$t('textColumns')" @change="onChange1" />
+    <demo-block :title="t('basicUsage')">
+      <van-picker :columns="t('textColumns')" @change="onChange1" />
     </demo-block>
 
-    <demo-block :title="$t('defaultIndex')">
+    <demo-block :title="t('defaultIndex')">
       <van-picker
-        :columns="$t('textColumns')"
+        :columns="t('textColumns')"
         :default-index="2"
         @change="onChange1"
       />
     </demo-block>
 
-    <demo-block :title="$t('showToolbar')">
+    <demo-block :title="t('showToolbar')">
       <van-picker
         show-toolbar
-        :title="$t('title')"
-        :columns="$t('textColumns')"
+        :title="t('title')"
+        :columns="t('textColumns')"
         @cancel="onCancel"
         @confirm="onConfirm"
       />
     </demo-block>
 
-    <demo-block :title="$t('multipleColumns')">
+    <demo-block :title="t('multipleColumns')">
       <van-picker
         show-toolbar
-        :title="$t('title')"
-        :columns="$t('dateColumns')"
+        :title="t('title')"
+        :columns="t('dateColumns')"
         @cancel="onCancel"
         @confirm="onConfirm"
       />
     </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="$t('cascade')">
+    <demo-block v-if="!isWeapp" :title="t('cascade')">
       <van-picker
         show-toolbar
-        :title="$t('title')"
-        :columns="$t('cascadeColumns')"
+        :title="t('title')"
+        :columns="t('cascadeColumns')"
         @cancel="onCancel"
         @confirm="onConfirm"
       />
     </demo-block>
 
-    <demo-block :title="$t('disableOption')">
-      <van-picker :columns="$t('disabledColumns')" />
+    <demo-block :title="t('disableOption')">
+      <van-picker :columns="t('disabledColumns')" />
     </demo-block>
 
-    <demo-block :title="$t('setColumnValues')">
+    <demo-block :title="t('setColumnValues')">
       <van-picker :columns="columns" @change="onChange2" />
     </demo-block>
 
-    <demo-block :title="$t('loadingStatus')">
+    <demo-block :title="t('loadingStatus')">
       <van-picker loading :columns="columns" />
     </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="$t('withPopup')">
+    <demo-block v-if="!isWeapp" :title="t('withPopup')">
       <van-field
         readonly
         clickable
-        :label="$t('city')"
+        :label="t('city')"
         :value="fieldValue"
-        :placeholder="$t('chooseCity')"
+        :placeholder="t('chooseCity')"
         @click="onClickField"
       />
       <van-popup v-model="showPicker" position="bottom">
         <van-picker
           show-toolbar
-          :columns="$t('textColumns')"
+          :columns="t('textColumns')"
           @cancel="onCancel2"
           @confirm="onConfirm2"
         />
@@ -139,7 +139,7 @@ export default {
 
   computed: {
     columns() {
-      const column = this.$t('column3');
+      const column = this.t('column3');
       return [
         {
           values: Object.keys(column),
@@ -156,19 +156,19 @@ export default {
 
   methods: {
     onChange1(picker, value, index) {
-      this.$toast(this.$t('toastContent', value, index));
+      this.$toast(this.t('toastContent', value, index));
     },
 
     onChange2(picker, values) {
-      picker.setColumnValues(1, this.$t('column3')[values[0]]);
+      picker.setColumnValues(1, this.t('column3')[values[0]]);
     },
 
     onConfirm(value, index) {
-      this.$toast(this.$t('toastContent', value, index));
+      this.$toast(this.t('toastContent', value, index));
     },
 
     onCancel() {
-      this.$toast(this.$t('cancel'));
+      this.$toast(this.t('cancel'));
     },
 
     onClickField() {
diff --git a/src/popup/demo/index.vue b/src/popup/demo/index.vue
index e62bf887c..ffda89d84 100644
--- a/src/popup/demo/index.vue
+++ b/src/popup/demo/index.vue
@@ -1,21 +1,17 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
-      <van-cell :title="$t('buttonBasic')" is-link @click="showBasic = true" />
+    <demo-block :title="t('basicUsage')">
+      <van-cell :title="t('buttonBasic')" is-link @click="showBasic = true" />
       <van-popup v-model="showBasic" :style="{ padding: '30px 50px' }">
-        {{ $t('content') }}
+        {{ t('content') }}
       </van-popup>
     </demo-block>
 
-    <demo-block :title="$t('position')">
-      <van-cell :title="$t('buttonTop')" is-link @click="showTop = true" />
-      <van-cell
-        :title="$t('buttonBottom')"
-        is-link
-        @click="showBottom = true"
-      />
-      <van-cell :title="$t('buttonLeft')" is-link @click="showLeft = true" />
-      <van-cell :title="$t('buttonRight')" is-link @click="showRight = true" />
+    <demo-block :title="t('position')">
+      <van-cell :title="t('buttonTop')" is-link @click="showTop = true" />
+      <van-cell :title="t('buttonBottom')" is-link @click="showBottom = true" />
+      <van-cell :title="t('buttonLeft')" is-link @click="showLeft = true" />
+      <van-cell :title="t('buttonRight')" is-link @click="showRight = true" />
 
       <van-popup v-model="showTop" position="top" :style="{ height: '30%' }" />
       <van-popup
@@ -35,19 +31,15 @@
       />
     </demo-block>
 
-    <demo-block :title="$t('closeIcon')">
+    <demo-block :title="t('closeIcon')">
+      <van-cell :title="t('closeIcon')" is-link @click="showCloseIcon = true" />
       <van-cell
-        :title="$t('closeIcon')"
-        is-link
-        @click="showCloseIcon = true"
-      />
-      <van-cell
-        :title="$t('customCloseIcon')"
+        :title="t('customCloseIcon')"
         is-link
         @click="showCustomCloseIcon = true"
       />
       <van-cell
-        :title="$t('customIconPosition')"
+        :title="t('customIconPosition')"
         is-link
         @click="showCustomIconPosition = true"
       />
@@ -74,9 +66,9 @@
       />
     </demo-block>
 
-    <demo-block :title="$t('roundCorner')">
+    <demo-block :title="t('roundCorner')">
       <van-cell
-        :title="$t('roundCorner')"
+        :title="t('roundCorner')"
         is-link
         @click="showRoundCorner = true"
       />
@@ -88,9 +80,9 @@
       />
     </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="$t('getContainer')">
+    <demo-block v-if="!isWeapp" :title="t('getContainer')">
       <van-cell
-        :title="$t('getContainer')"
+        :title="t('getContainer')"
         is-link
         @click="showGetContainer = true"
       />
diff --git a/src/progress/demo/index.vue b/src/progress/demo/index.vue
index 7041b551f..f07c9d46f 100644
--- a/src/progress/demo/index.vue
+++ b/src/progress/demo/index.vue
@@ -1,27 +1,27 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-progress :percentage="50" />
     </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="$t('strokeWidth')">
+    <demo-block v-if="!isWeapp" :title="t('strokeWidth')">
       <van-progress :percentage="50" stroke-width="8" />
     </demo-block>
 
-    <demo-block :title="$t('title2')">
+    <demo-block :title="t('title2')">
       <van-progress inactive :percentage="50" />
     </demo-block>
 
-    <demo-block :title="$t('title3')">
+    <demo-block :title="t('title3')">
       <van-progress
         color="#f2826a"
         :percentage="25"
-        :pivot-text="$t('orange')"
+        :pivot-text="t('orange')"
       />
-      <van-progress color="#ee0a24" :percentage="50" :pivot-text="$t('red')" />
+      <van-progress color="#ee0a24" :percentage="50" :pivot-text="t('red')" />
       <van-progress
         :percentage="75"
-        :pivot-text="$t('purple')"
+        :pivot-text="t('purple')"
         pivot-color="#7232dd"
         color="linear-gradient(to right, #be99ff, #7232dd)"
       />
diff --git a/src/pull-refresh/demo/index.vue b/src/pull-refresh/demo/index.vue
index c7f2a6da7..e4d7fc031 100644
--- a/src/pull-refresh/demo/index.vue
+++ b/src/pull-refresh/demo/index.vue
@@ -1,23 +1,23 @@
 <template>
   <demo-section name="pull-refresh">
     <van-tabs>
-      <van-tab :title="$t('basicUsage')">
+      <van-tab :title="t('basicUsage')">
         <van-pull-refresh v-model="isLoading" @refresh="onRefresh(true)">
           <p>{{ tips }}</p>
         </van-pull-refresh>
       </van-tab>
 
-      <van-tab :title="$t('successTip')">
+      <van-tab :title="t('successTip')">
         <van-pull-refresh
           v-model="isLoading"
-          :success-text="$t('success')"
+          :success-text="t('success')"
           @refresh="onRefresh(false)"
         >
           <p>{{ tips }}</p>
         </van-pull-refresh>
       </van-tab>
 
-      <van-tab :title="$t('customTips')">
+      <van-tab :title="t('customTips')">
         <van-pull-refresh
           v-model="isLoading"
           head-height="80"
@@ -72,10 +72,10 @@ export default {
   computed: {
     tips() {
       if (this.count) {
-        return `${this.$t('text')}: ${this.count}`;
+        return `${this.t('text')}: ${this.count}`;
       }
 
-      return this.$t('try');
+      return this.t('try');
     },
   },
 
@@ -96,7 +96,7 @@ export default {
     onRefresh(showToast) {
       setTimeout(() => {
         if (showToast) {
-          this.$toast(this.$t('success'));
+          this.$toast(this.t('success'));
         }
 
         this.isLoading = false;
diff --git a/src/radio/demo/index.vue b/src/radio/demo/index.vue
index 25fda91f9..0a6762822 100644
--- a/src/radio/demo/index.vue
+++ b/src/radio/demo/index.vue
@@ -1,69 +1,69 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-radio-group v-model="radio1" class="demo-radio-group">
-        <van-radio name="1">{{ $t('radio') }} 1</van-radio>
-        <van-radio name="2">{{ $t('radio') }} 2</van-radio>
+        <van-radio name="1">{{ t('radio') }} 1</van-radio>
+        <van-radio name="2">{{ t('radio') }} 2</van-radio>
       </van-radio-group>
     </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="$t('horizontal')">
+    <demo-block v-if="!isWeapp" :title="t('horizontal')">
       <van-radio-group
         v-model="radioHorizontal"
         class="demo-radio-group"
         direction="horizontal"
       >
-        <van-radio name="1">{{ $t('radio') }} 1</van-radio>
-        <van-radio name="2">{{ $t('radio') }} 2</van-radio>
+        <van-radio name="1">{{ t('radio') }} 1</van-radio>
+        <van-radio name="2">{{ t('radio') }} 2</van-radio>
       </van-radio-group>
     </demo-block>
 
-    <demo-block :title="$t('disabled')">
+    <demo-block :title="t('disabled')">
       <van-radio-group v-model="radio2" class="demo-radio-group" disabled>
-        <van-radio name="1">{{ $t('radio') }} 1</van-radio>
-        <van-radio name="2">{{ $t('radio') }} 2</van-radio>
+        <van-radio name="1">{{ t('radio') }} 1</van-radio>
+        <van-radio name="2">{{ t('radio') }} 2</van-radio>
       </van-radio-group>
     </demo-block>
 
-    <demo-block :title="$t('customShape')">
+    <demo-block :title="t('customShape')">
       <van-radio-group v-model="radioShape" class="demo-radio-group">
-        <van-radio name="1" shape="square">{{ $t('radio') }} 1</van-radio>
-        <van-radio name="2" shape="square">{{ $t('radio') }} 2</van-radio>
+        <van-radio name="1" shape="square">{{ t('radio') }} 1</van-radio>
+        <van-radio name="2" shape="square">{{ t('radio') }} 2</van-radio>
       </van-radio-group>
     </demo-block>
 
-    <demo-block :title="$t('customColor')">
+    <demo-block :title="t('customColor')">
       <van-radio-group v-model="radio3" class="demo-radio-group">
         <van-radio name="1" checked-color="#07c160">
-          {{ $t('radio') }} 1
+          {{ t('radio') }} 1
         </van-radio>
         <van-radio name="2" checked-color="#07c160">
-          {{ $t('radio') }} 2
+          {{ t('radio') }} 2
         </van-radio>
       </van-radio-group>
     </demo-block>
 
-    <demo-block :title="$t('customIconSize')">
+    <demo-block :title="t('customIconSize')">
       <van-radio-group v-model="radioIconSize" class="demo-radio-group">
         <van-radio name="1" checked-color="#07c160" icon-size="24px">
-          {{ $t('radio') }} 1
+          {{ t('radio') }} 1
         </van-radio>
         <van-radio name="2" checked-color="#07c160" icon-size="24px">
-          {{ $t('radio') }} 2
+          {{ t('radio') }} 2
         </van-radio>
       </van-radio-group>
     </demo-block>
 
-    <demo-block :title="$t('customIcon')">
+    <demo-block :title="t('customIcon')">
       <van-radio-group v-model="radio4" class="demo-radio-group">
         <van-radio name="1">
-          {{ $t('radio') }} 1
+          {{ t('radio') }} 1
           <template #icon="{ checked }">
             <img :src="checked ? icon.active : icon.inactive" />
           </template>
         </van-radio>
         <van-radio name="2">
-          {{ $t('radio') }} 2
+          {{ t('radio') }} 2
           <template #icon="{ checked }">
             <img :src="checked ? icon.active : icon.inactive" />
           </template>
@@ -71,20 +71,20 @@
       </van-radio-group>
     </demo-block>
 
-    <demo-block :title="$t('disableLabel')">
+    <demo-block :title="t('disableLabel')">
       <van-radio-group v-model="radioLabel" class="demo-radio-group">
-        <van-radio name="1" label-disabled>{{ $t('radio') }} 1</van-radio>
-        <van-radio name="2" label-disabled>{{ $t('radio') }} 2</van-radio>
+        <van-radio name="1" label-disabled>{{ t('radio') }} 1</van-radio>
+        <van-radio name="2" label-disabled>{{ t('radio') }} 2</van-radio>
       </van-radio-group>
     </demo-block>
 
-    <demo-block :title="$t('withCell')">
+    <demo-block :title="t('withCell')">
       <van-radio-group v-model="radio5">
         <van-cell-group>
-          <van-cell clickable :title="$t('radio') + 1" @click="radio5 = '1'">
+          <van-cell clickable :title="t('radio') + 1" @click="radio5 = '1'">
             <van-radio name="1" slot="right-icon" />
           </van-cell>
-          <van-cell clickable :title="$t('radio') + 2" @click="radio5 = '2'">
+          <van-cell clickable :title="t('radio') + 2" @click="radio5 = '2'">
             <van-radio name="2" slot="right-icon" />
           </van-cell>
         </van-cell-group>
diff --git a/src/rate/demo/index.vue b/src/rate/demo/index.vue
index 083af7c67..532f22899 100644
--- a/src/rate/demo/index.vue
+++ b/src/rate/demo/index.vue
@@ -1,14 +1,14 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-rate v-model="value1" />
     </demo-block>
 
-    <demo-block :title="$t('customIcon')">
+    <demo-block :title="t('customIcon')">
       <van-rate v-model="value2" icon="like" void-icon="like-o" />
     </demo-block>
 
-    <demo-block :title="$t('customStyle')">
+    <demo-block :title="t('customStyle')">
       <van-rate
         v-model="value3"
         :size="25"
@@ -18,7 +18,7 @@
       />
     </demo-block>
 
-    <demo-block :title="$t('halfStar')">
+    <demo-block :title="t('halfStar')">
       <van-rate
         v-model="value4"
         :size="25"
@@ -28,19 +28,19 @@
       />
     </demo-block>
 
-    <demo-block :title="$t('customCount')">
+    <demo-block :title="t('customCount')">
       <van-rate v-model="value5" :count="6" />
     </demo-block>
 
-    <demo-block :title="$t('disabled')">
+    <demo-block :title="t('disabled')">
       <van-rate v-model="value6" disabled />
     </demo-block>
 
-    <demo-block :title="$t('readonly')">
+    <demo-block :title="t('readonly')">
       <van-rate v-model="value6" readonly />
     </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="$t('changeEvent')">
+    <demo-block v-if="!isWeapp" :title="t('changeEvent')">
       <van-rate v-model="value7" @change="onChange" />
     </demo-block>
   </demo-section>
@@ -86,7 +86,7 @@ export default {
   methods: {
     onChange(value) {
       this.value7 = value;
-      this.$toast(this.$t('toastContent', value));
+      this.$toast(this.t('toastContent', value));
     },
   },
 };
diff --git a/src/search/demo/index.vue b/src/search/demo/index.vue
index 75bb4709f..d47c77cb5 100644
--- a/src/search/demo/index.vue
+++ b/src/search/demo/index.vue
@@ -1,14 +1,14 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
-      <van-search v-model="value1" :placeholder="$t('placeholder')" />
+    <demo-block :title="t('basicUsage')">
+      <van-search v-model="value1" :placeholder="t('placeholder')" />
     </demo-block>
 
-    <demo-block :title="$t('listenToEvents')">
+    <demo-block :title="t('listenToEvents')">
       <form action="/">
         <van-search
           v-model="value5"
-          :placeholder="$t('placeholder')"
+          :placeholder="t('placeholder')"
           show-action
           @search="onSearch"
           @cancel="onCancel"
@@ -16,37 +16,37 @@
       </form>
     </demo-block>
 
-    <demo-block :title="$t('inputAlign')">
+    <demo-block :title="t('inputAlign')">
       <van-search
         v-model="value4"
-        :placeholder="$t('placeholder')"
+        :placeholder="t('placeholder')"
         input-align="center"
       />
     </demo-block>
 
-    <demo-block :title="$t('disabled')">
-      <van-search v-model="value3" :placeholder="$t('placeholder')" disabled />
+    <demo-block :title="t('disabled')">
+      <van-search v-model="value3" :placeholder="t('placeholder')" disabled />
     </demo-block>
 
-    <demo-block :title="$t('background')">
+    <demo-block :title="t('background')">
       <van-search
         v-model="value2"
-        :placeholder="$t('placeholder')"
+        :placeholder="t('placeholder')"
         shape="round"
         background="#4fc08d"
       />
     </demo-block>
 
-    <demo-block :title="$t('customButton')">
+    <demo-block :title="t('customButton')">
       <van-search
         v-model="value6"
         show-action
-        :label="$t('label')"
-        :placeholder="$t('placeholder')"
+        :label="t('label')"
+        :placeholder="t('placeholder')"
         @search="onSearch"
       >
         <template #action>
-          <div @click="onSearch">{{ $t('search') }}</div>
+          <div @click="onSearch">{{ t('search') }}</div>
         </template>
       </van-search>
     </demo-block>
@@ -93,7 +93,7 @@ export default {
     },
 
     onCancel() {
-      this.$toast(this.$t('cancel'));
+      this.$toast(this.t('cancel'));
     },
   },
 };
diff --git a/src/sidebar/demo/index.vue b/src/sidebar/demo/index.vue
index 6090101ba..5ab0d55f8 100644
--- a/src/sidebar/demo/index.vue
+++ b/src/sidebar/demo/index.vue
@@ -2,38 +2,38 @@
   <demo-section>
     <van-grid :column-num="2" :border="false">
       <van-grid-item>
-        <h3 class="demo-sidebar-title">{{ $t('basicUsage') }}</h3>
+        <h3 class="demo-sidebar-title">{{ t('basicUsage') }}</h3>
         <van-sidebar v-model="activeKey1">
-          <van-sidebar-item :title="$t('title')" />
-          <van-sidebar-item :title="$t('title')" />
-          <van-sidebar-item :title="$t('title')" />
+          <van-sidebar-item :title="t('title')" />
+          <van-sidebar-item :title="t('title')" />
+          <van-sidebar-item :title="t('title')" />
         </van-sidebar>
       </van-grid-item>
 
       <van-grid-item>
-        <h3 class="demo-sidebar-title">{{ $t('showBadge') }}</h3>
+        <h3 class="demo-sidebar-title">{{ t('showBadge') }}</h3>
         <van-sidebar v-model="activeKey2">
-          <van-sidebar-item :title="$t('title')" dot />
-          <van-sidebar-item :title="$t('title')" badge="5" />
-          <van-sidebar-item :title="$t('title')" badge="99+" />
+          <van-sidebar-item :title="t('title')" dot />
+          <van-sidebar-item :title="t('title')" badge="5" />
+          <van-sidebar-item :title="t('title')" badge="99+" />
         </van-sidebar>
       </van-grid-item>
 
       <van-grid-item>
-        <h3 class="demo-sidebar-title">{{ $t('disabled') }}</h3>
+        <h3 class="demo-sidebar-title">{{ t('disabled') }}</h3>
         <van-sidebar v-model="activeKey3">
-          <van-sidebar-item :title="$t('title')" />
-          <van-sidebar-item :title="$t('title')" disabled />
-          <van-sidebar-item :title="$t('title')" />
+          <van-sidebar-item :title="t('title')" />
+          <van-sidebar-item :title="t('title')" disabled />
+          <van-sidebar-item :title="t('title')" />
         </van-sidebar>
       </van-grid-item>
 
       <van-grid-item>
-        <h3 class="demo-sidebar-title">{{ $t('changeEvent') }}</h3>
+        <h3 class="demo-sidebar-title">{{ t('changeEvent') }}</h3>
         <van-sidebar v-model="activeKey4" @change="onChange">
-          <van-sidebar-item :title="$t('title') + 1" />
-          <van-sidebar-item :title="$t('title') + 2" />
-          <van-sidebar-item :title="$t('title') + 3" />
+          <van-sidebar-item :title="t('title') + 1" />
+          <van-sidebar-item :title="t('title') + 2" />
+          <van-sidebar-item :title="t('title') + 3" />
         </van-sidebar>
       </van-grid-item>
     </van-grid>
@@ -71,7 +71,7 @@ export default {
     onChange(index) {
       this.$notify({
         type: 'primary',
-        message: `${this.$t('selectTip')} ${this.$t('title')}${index + 1}`,
+        message: `${this.t('selectTip')} ${this.t('title')}${index + 1}`,
       });
     },
   },
diff --git a/src/skeleton/demo/index.vue b/src/skeleton/demo/index.vue
index d4f6f10a1..9dc9591d7 100644
--- a/src/skeleton/demo/index.vue
+++ b/src/skeleton/demo/index.vue
@@ -1,21 +1,21 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-skeleton title :row="3" />
     </demo-block>
 
-    <demo-block :title="$t('showAvatar')">
+    <demo-block :title="t('showAvatar')">
       <van-skeleton title avatar :row="3" />
     </demo-block>
 
-    <demo-block :title="$t('showChildren')">
+    <demo-block :title="t('showChildren')">
       <van-switch v-model="show" size="24px" />
       <van-skeleton title avatar :row="3" :loading="!show">
         <div class="demo-preview">
           <img src="https://img.yzcdn.cn/vant/logo.png" />
           <div class="demo-content">
-            <h3>{{ $t('title') }}</h3>
-            <p>{{ $t('desc') }}</p>
+            <h3>{{ t('title') }}</h3>
+            <p>{{ t('desc') }}</p>
           </div>
         </div>
       </van-skeleton>
diff --git a/src/sku/demo/index.vue b/src/sku/demo/index.vue
index 64d3dda29..77c09d950 100644
--- a/src/sku/demo/index.vue
+++ b/src/sku/demo/index.vue
@@ -1,7 +1,7 @@
 <template>
   <demo-section>
     <!-- 基础用法 -->
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <div class="sku-container">
         <van-sku
           v-model="showBase"
@@ -24,13 +24,13 @@
           @add-cart="onAddCartClicked"
         />
         <van-button block type="primary" @click="showBase = true">
-          {{ $t('basicUsage') }}
+          {{ t('basicUsage') }}
         </van-button>
       </div>
     </demo-block>
 
     <!-- 自定义步进器 -->
-    <demo-block :title="$t('title2')">
+    <demo-block :title="t('title2')">
       <div class="sku-container">
         <van-sku
           v-model="showStepper"
@@ -50,13 +50,13 @@
           @add-cart="onAddCartClicked"
         />
         <van-button block type="primary" @click="showStepper = true">
-          {{ $t('title2') }}
+          {{ t('title2') }}
         </van-button>
       </div>
     </demo-block>
 
     <!-- 隐藏售罄sku -->
-    <demo-block :title="$t('hideSoldoutSku')">
+    <demo-block :title="t('hideSoldoutSku')">
       <div class="sku-container">
         <van-sku
           v-model="showSoldout"
@@ -77,16 +77,16 @@
           @add-cart="onAddCartClicked"
         />
         <van-button block type="primary" @click="showSoldout = true">
-          {{ $t('hideSoldoutSku') }}
+          {{ t('hideSoldoutSku') }}
         </van-button>
       </div>
     </demo-block>
 
-    <demo-block :title="$t('advancedUsage')">
+    <demo-block :title="t('advancedUsage')">
       <div class="sku-container">
         <van-sku
           v-model="showCustom"
-          :stepper-title="$t('stepperTitle')"
+          :stepper-title="t('stepperTitle')"
           :sku="skuData.sku"
           :goods="skuData.goods_info"
           :goods-id="skuData.goods_id"
@@ -111,7 +111,7 @@
           </template>
           <template #sku-actions-top>
             <div class="van-sku-header-item text-center">
-              {{ $t('actionsTop') }}
+              {{ t('actionsTop') }}
             </div>
           </template>
           <template #sku-actions="{ skuEventBus }">
@@ -122,7 +122,7 @@
                 type="warning"
                 @click="onPointClicked"
               >
-                {{ $t('button1') }}
+                {{ t('button1') }}
               </van-button>
               <van-button
                 square
@@ -130,13 +130,13 @@
                 type="danger"
                 @click="skuEventBus.$emit('sku:buy')"
               >
-                {{ $t('button2') }}
+                {{ t('button2') }}
               </van-button>
             </div>
           </template>
         </van-sku>
         <van-button block type="primary" @click="showCustom = true">
-          {{ $t('advancedUsage') }}
+          {{ t('advancedUsage') }}
         </van-button>
       </div>
     </demo-block>
diff --git a/src/slider/demo/index.vue b/src/slider/demo/index.vue
index a54deba0a..f2278d264 100644
--- a/src/slider/demo/index.vue
+++ b/src/slider/demo/index.vue
@@ -1,22 +1,22 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('title1')">
+    <demo-block :title="t('title1')">
       <van-slider v-model="value1" @change="onChange" />
     </demo-block>
 
-    <demo-block :title="$t('title2')">
+    <demo-block :title="t('title2')">
       <van-slider v-model="value2" :min="-50" :max="50" @change="onChange" />
     </demo-block>
 
-    <demo-block :title="$t('title3')">
+    <demo-block :title="t('title3')">
       <van-slider v-model="value3" disabled />
     </demo-block>
 
-    <demo-block :title="$t('title4')">
+    <demo-block :title="t('title4')">
       <van-slider v-model="value4" :step="10" @change="onChange" />
     </demo-block>
 
-    <demo-block :title="$t('customStyle')">
+    <demo-block :title="t('customStyle')">
       <van-slider
         v-model="value5"
         bar-height="4px"
@@ -25,7 +25,7 @@
       />
     </demo-block>
 
-    <demo-block :title="$t('customButton')">
+    <demo-block :title="t('customButton')">
       <van-slider v-model="value6" active-color="#ee0a24">
         <template #button>
           <div class="custom-button">{{ value6 }}</div>
@@ -33,7 +33,7 @@
       </van-slider>
     </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="$t('vertical')">
+    <demo-block v-if="!isWeapp" :title="t('vertical')">
       <div :style="{ height: '120px', paddingLeft: '30px' }">
         <van-slider v-model="value7" vertical @change="onChange" />
       </div>
@@ -80,7 +80,7 @@ export default {
 
   methods: {
     onChange(value) {
-      this.$toast(this.$t('text') + value);
+      this.$toast(this.t('text') + value);
     },
   },
 };
diff --git a/src/stepper/demo/index.vue b/src/stepper/demo/index.vue
index e3bd4b894..e4e0758be 100644
--- a/src/stepper/demo/index.vue
+++ b/src/stepper/demo/index.vue
@@ -1,38 +1,38 @@
 <template>
   <demo-section>
-    <van-cell center :title="$t('basicUsage')">
+    <van-cell center :title="t('basicUsage')">
       <van-stepper v-model="stepper1" />
     </van-cell>
 
-    <van-cell center :title="$t('step')">
+    <van-cell center :title="t('step')">
       <van-stepper v-model="stepper2" step="2" />
     </van-cell>
 
-    <van-cell center :title="$t('range')">
+    <van-cell center :title="t('range')">
       <van-stepper v-model="stepper3" :min="5" :max="8" />
     </van-cell>
 
-    <van-cell center :title="$t('integer')">
+    <van-cell center :title="t('integer')">
       <van-stepper v-model="stepper4" integer />
     </van-cell>
 
-    <van-cell center :title="$t('disabled')">
+    <van-cell center :title="t('disabled')">
       <van-stepper v-model="stepper5" disabled />
     </van-cell>
 
-    <van-cell center :title="$t('disableInput')">
+    <van-cell center :title="t('disableInput')">
       <van-stepper v-model="disabledInput" disable-input />
     </van-cell>
 
-    <van-cell center :title="$t('decimalLength')">
+    <van-cell center :title="t('decimalLength')">
       <van-stepper v-model="stepper8" :decimal-length="1" step="0.2" />
     </van-cell>
 
-    <van-cell center :title="$t('customSize')">
+    <van-cell center :title="t('customSize')">
       <van-stepper v-model="stepper7" button-size="32px" input-width="40px" />
     </van-cell>
 
-    <van-cell center :title="$t('asyncChange')">
+    <van-cell center :title="t('asyncChange')">
       <van-stepper :value="stepper6" async-change @change="onChange" />
     </van-cell>
   </demo-section>
diff --git a/src/steps/demo/index.vue b/src/steps/demo/index.vue
index 343342921..29ad78eac 100644
--- a/src/steps/demo/index.vue
+++ b/src/steps/demo/index.vue
@@ -1,42 +1,42 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-steps :active="active">
-        <van-step>{{ $t('step1') }}</van-step>
-        <van-step>{{ $t('step2') }}</van-step>
-        <van-step>{{ $t('step3') }}</van-step>
-        <van-step>{{ $t('step4') }}</van-step>
+        <van-step>{{ t('step1') }}</van-step>
+        <van-step>{{ t('step2') }}</van-step>
+        <van-step>{{ t('step3') }}</van-step>
+        <van-step>{{ t('step4') }}</van-step>
       </van-steps>
 
-      <van-button @click="nextStep">{{ $t('nextStep') }}</van-button>
+      <van-button @click="nextStep">{{ t('nextStep') }}</van-button>
     </demo-block>
 
-    <demo-block :title="$t('customStyle')">
+    <demo-block :title="t('customStyle')">
       <van-steps
         :active="active"
         active-icon="success"
         inactive-icon="arrow"
         active-color="#38f"
       >
-        <van-step>{{ $t('step1') }}</van-step>
-        <van-step>{{ $t('step2') }}</van-step>
-        <van-step>{{ $t('step3') }}</van-step>
-        <van-step>{{ $t('step4') }}</van-step>
+        <van-step>{{ t('step1') }}</van-step>
+        <van-step>{{ t('step2') }}</van-step>
+        <van-step>{{ t('step3') }}</van-step>
+        <van-step>{{ t('step4') }}</van-step>
       </van-steps>
     </demo-block>
 
-    <demo-block :title="$t('title3')">
+    <demo-block :title="t('title3')">
       <van-steps :active="0" direction="vertical">
         <van-step>
-          <h3>{{ $t('status1') }}</h3>
+          <h3>{{ t('status1') }}</h3>
           <p>2016-07-12 12:40</p>
         </van-step>
         <van-step>
-          <h3>{{ $t('status2') }}</h3>
+          <h3>{{ t('status2') }}</h3>
           <p>2016-07-11 10:00</p>
         </van-step>
         <van-step>
-          <h3>{{ $t('status3') }}</h3>
+          <h3>{{ t('status3') }}</h3>
           <p>2016-07-10 09:30</p>
         </van-step>
       </van-steps>
diff --git a/src/sticky/demo/index.vue b/src/sticky/demo/index.vue
index 60faebd6d..e7f1234a6 100644
--- a/src/sticky/demo/index.vue
+++ b/src/sticky/demo/index.vue
@@ -1,26 +1,26 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-sticky>
         <van-button type="primary" style="margin-left: 15px;">
-          {{ $t('basicUsage') }}
+          {{ t('basicUsage') }}
         </van-button>
       </van-sticky>
     </demo-block>
 
-    <demo-block :title="$t('offsetTop')">
+    <demo-block :title="t('offsetTop')">
       <van-sticky :offset-top="50">
         <van-button type="info" style="margin-left: 115px;">
-          {{ $t('offsetTop') }}
+          {{ t('offsetTop') }}
         </van-button>
       </van-sticky>
     </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="$t('setContainer')">
+    <demo-block v-if="!isWeapp" :title="t('setContainer')">
       <div ref="container" style="height: 150px; background-color: #fff;">
         <van-sticky :container="container">
           <van-button type="warning" style="margin-left: 215px;">
-            {{ $t('setContainer') }}
+            {{ t('setContainer') }}
           </van-button>
         </van-sticky>
       </div>
diff --git a/src/style/demo/index.vue b/src/style/demo/index.vue
index a0c69e5b7..3145bfd3d 100644
--- a/src/style/demo/index.vue
+++ b/src/style/demo/index.vue
@@ -1,15 +1,15 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('ellipsis')">
-      <div class="van-ellipsis">{{ $t('text1') }}</div>
-      <div class="van-multi-ellipsis--l2">{{ $t('text2') }}</div>
+    <demo-block :title="t('ellipsis')">
+      <div class="van-ellipsis">{{ t('text1') }}</div>
+      <div class="van-multi-ellipsis--l2">{{ t('text2') }}</div>
     </demo-block>
 
-    <demo-block :title="$t('hairline')">
+    <demo-block :title="t('hairline')">
       <div class="van-hairline--top" />
     </demo-block>
 
-    <demo-block :title="$t('animation')">
+    <demo-block :title="t('animation')">
       <van-cell is-link title="Fade" @click="animate('van-fade')" />
       <van-cell is-link title="Slide Up" @click="animate('van-slide-up')" />
       <van-cell is-link title="Slide Down" @click="animate('van-slide-down')" />
diff --git a/src/submit-bar/demo/index.vue b/src/submit-bar/demo/index.vue
index 99fae3d1d..82e9a70d8 100644
--- a/src/submit-bar/demo/index.vue
+++ b/src/submit-bar/demo/index.vue
@@ -1,44 +1,44 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-submit-bar
         :price="3050"
-        :button-text="$t('submit')"
+        :button-text="t('submit')"
         @submit="onClickButton"
       />
     </demo-block>
 
-    <demo-block :title="$t('disabled')">
+    <demo-block :title="t('disabled')">
       <van-submit-bar
         disabled
         :price="3050"
-        :button-text="$t('submit')"
-        :tip="$t('tip1')"
+        :button-text="t('submit')"
+        :tip="t('tip1')"
         tip-icon="info-o"
         @submit="onClickButton"
       />
     </demo-block>
 
-    <demo-block :title="$t('loadingStatus')">
+    <demo-block :title="t('loadingStatus')">
       <van-submit-bar
         loading
         :price="3050"
-        :button-text="$t('submit')"
+        :button-text="t('submit')"
         @submit="onClickButton"
       />
     </demo-block>
 
-    <demo-block :title="$t('advancedUsage')">
+    <demo-block :title="t('advancedUsage')">
       <van-submit-bar
         :price="3050"
-        :button-text="$t('submit')"
+        :button-text="t('submit')"
         @submit="onClickButton"
       >
-        <van-checkbox v-model="checked">{{ $t('check') }}</van-checkbox>
+        <van-checkbox v-model="checked">{{ t('check') }}</van-checkbox>
         <template #tip>
-          {{ $t('tip2') }}
+          {{ t('tip2') }}
           <span class="edit-address" @click="onClickLink">
-            {{ $t('tip3') }}
+            {{ t('tip3') }}
           </span>
         </template>
       </van-submit-bar>
@@ -77,10 +77,10 @@ export default {
 
   methods: {
     onClickButton() {
-      this.$toast(this.$t('clickButton'));
+      this.$toast(this.t('clickButton'));
     },
     onClickLink() {
-      this.$toast(this.$t('clickLink'));
+      this.$toast(this.t('clickLink'));
     },
   },
 };
diff --git a/src/swipe-cell/demo/index.vue b/src/swipe-cell/demo/index.vue
index 88da1a0e7..d7ce0629f 100644
--- a/src/swipe-cell/demo/index.vue
+++ b/src/swipe-cell/demo/index.vue
@@ -1,30 +1,26 @@
 <template>
   <div>
     <demo-section>
-      <demo-block :title="$t('basicUsage')">
+      <demo-block :title="t('basicUsage')">
         <van-swipe-cell>
           <template #left>
-            <van-button square type="primary" :text="$t('select')" />
+            <van-button square type="primary" :text="t('select')" />
           </template>
-          <van-cell
-            :border="false"
-            :title="$t('title')"
-            :value="$t('content')"
-          />
+          <van-cell :border="false" :title="t('title')" :value="t('content')" />
           <template #right>
-            <van-button square type="danger" :text="$t('delete')" />
-            <van-button square type="primary" :text="$t('collect')" />
+            <van-button square type="danger" :text="t('delete')" />
+            <van-button square type="primary" :text="t('collect')" />
           </template>
         </van-swipe-cell>
       </demo-block>
 
-      <demo-block :title="$t('customContent')">
+      <demo-block :title="t('customContent')">
         <van-swipe-cell>
           <van-card
             num="2"
             price="2.00"
-            :desc="$t('desc')"
-            :title="$t('cardTitle')"
+            :desc="t('desc')"
+            :title="t('cardTitle')"
             :thumb="imageURL"
           />
           <template #right>
@@ -32,24 +28,20 @@
               square
               type="danger"
               class="delete-button"
-              :text="$t('delete')"
+              :text="t('delete')"
             />
           </template>
         </van-swipe-cell>
       </demo-block>
 
-      <demo-block :title="$t('beforeClose')">
+      <demo-block :title="t('beforeClose')">
         <van-swipe-cell :before-close="beforeClose">
           <template #left>
-            <van-button square type="primary" :text="$t('select')" />
+            <van-button square type="primary" :text="t('select')" />
           </template>
-          <van-cell
-            :border="false"
-            :title="$t('title')"
-            :value="$t('content')"
-          />
+          <van-cell :border="false" :title="t('title')" :value="t('content')" />
           <template #right>
-            <van-button square type="danger" :text="$t('delete')" />
+            <van-button square type="danger" :text="t('delete')" />
           </template>
         </van-swipe-cell>
       </demo-block>
@@ -99,7 +91,7 @@ export default {
         case 'right':
           this.$dialog
             .confirm({
-              message: this.$t('confirm'),
+              message: this.t('confirm'),
             })
             .then(() => {
               instance.close();
diff --git a/src/swipe/demo/index.vue b/src/swipe/demo/index.vue
index 4d181d7bb..5833b0de6 100644
--- a/src/swipe/demo/index.vue
+++ b/src/swipe/demo/index.vue
@@ -1,6 +1,6 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-swipe :autoplay="3000" indicator-color="white">
         <van-swipe-item>1</van-swipe-item>
         <van-swipe-item>2</van-swipe-item>
@@ -9,7 +9,7 @@
       </van-swipe>
     </demo-block>
 
-    <demo-block :title="$t('title2')">
+    <demo-block :title="t('title2')">
       <van-swipe :autoplay="3000">
         <van-swipe-item v-for="(image, index) in images" :key="index">
           <img v-lazy="image" />
@@ -17,7 +17,7 @@
       </van-swipe>
     </demo-block>
 
-    <demo-block :title="$t('title3')">
+    <demo-block :title="t('title3')">
       <van-swipe indicator-color="white" @change="onChange1">
         <van-swipe-item>1</van-swipe-item>
         <van-swipe-item>2</van-swipe-item>
@@ -26,7 +26,7 @@
       </van-swipe>
     </demo-block>
 
-    <demo-block :title="$t('title4')">
+    <demo-block :title="t('title4')">
       <van-swipe
         vertical
         :autoplay="3000"
@@ -41,7 +41,7 @@
       </van-swipe>
     </demo-block>
 
-    <demo-block :title="$t('title5')">
+    <demo-block :title="t('title5')">
       <van-swipe :width="300" :loop="false" indicator-color="white">
         <van-swipe-item>1</van-swipe-item>
         <van-swipe-item>2</van-swipe-item>
@@ -50,7 +50,7 @@
       </van-swipe>
     </demo-block>
 
-    <demo-block :title="$t('title6')">
+    <demo-block :title="t('title6')">
       <van-swipe @change="onChange2">
         <van-swipe-item>1</van-swipe-item>
         <van-swipe-item>2</van-swipe-item>
@@ -100,7 +100,7 @@ export default {
 
   methods: {
     onChange1(index) {
-      this.$toast(this.$t('message') + index);
+      this.$toast(this.t('message') + index);
     },
 
     onChange2(index) {
diff --git a/src/switch-cell/demo/index.vue b/src/switch-cell/demo/index.vue
index 5f8f8491e..f79632745 100644
--- a/src/switch-cell/demo/index.vue
+++ b/src/switch-cell/demo/index.vue
@@ -1,20 +1,20 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-cell-group>
-        <van-switch-cell v-model="checked" :title="$t('title')" />
+        <van-switch-cell v-model="checked" :title="t('title')" />
       </van-cell-group>
     </demo-block>
 
-    <demo-block :title="$t('disabled')">
+    <demo-block :title="t('disabled')">
       <van-cell-group>
-        <van-switch-cell v-model="checked" disabled :title="$t('title')" />
+        <van-switch-cell v-model="checked" disabled :title="t('title')" />
       </van-cell-group>
     </demo-block>
 
-    <demo-block :title="$t('loadingStatus')">
+    <demo-block :title="t('loadingStatus')">
       <van-cell-group>
-        <van-switch-cell v-model="checked" loading :title="$t('title')" />
+        <van-switch-cell v-model="checked" loading :title="t('title')" />
       </van-cell-group>
     </demo-block>
   </demo-section>
diff --git a/src/switch/demo/index.vue b/src/switch/demo/index.vue
index db3266582..686676ab9 100644
--- a/src/switch/demo/index.vue
+++ b/src/switch/demo/index.vue
@@ -1,22 +1,22 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-switch v-model="checked" />
     </demo-block>
 
-    <demo-block :title="$t('disabled')">
+    <demo-block :title="t('disabled')">
       <van-switch v-model="checked" disabled />
     </demo-block>
 
-    <demo-block :title="$t('loadingStatus')">
+    <demo-block :title="t('loadingStatus')">
       <van-switch v-model="checked" loading />
     </demo-block>
 
-    <demo-block :title="$t('customSize')">
+    <demo-block :title="t('customSize')">
       <van-switch v-model="checked2" size="24px" />
     </demo-block>
 
-    <demo-block :title="$t('customColor')">
+    <demo-block :title="t('customColor')">
       <van-switch
         v-model="checked3"
         active-color="#07c160"
@@ -24,12 +24,12 @@
       />
     </demo-block>
 
-    <demo-block :title="$t('asyncControl')">
+    <demo-block :title="t('asyncControl')">
       <van-switch :value="checked4" @input="onInput" />
     </demo-block>
 
-    <demo-block :title="$t('withCell')">
-      <van-cell center :title="$t('title')">
+    <demo-block :title="t('withCell')">
+      <van-cell center :title="t('title')">
         <van-switch v-model="checked5" slot="right-icon" size="24" />
       </van-cell>
     </demo-block>
@@ -74,8 +74,8 @@ export default {
     onInput(checked) {
       this.$dialog
         .confirm({
-          title: this.$t('title'),
-          message: this.$t('message'),
+          title: this.t('title'),
+          message: this.t('message'),
         })
         .then(() => {
           this.checked4 = checked;
diff --git a/src/tab/demo/index.vue b/src/tab/demo/index.vue
index f5747ea64..6a72eea9e 100644
--- a/src/tab/demo/index.vue
+++ b/src/tab/demo/index.vue
@@ -1,103 +1,95 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-tabs v-model="active">
-        <van-tab :title="$t('tab') + index" v-for="index in tabs" :key="index">
-          {{ $t('content') }} {{ index }}
+        <van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
+          {{ t('content') }} {{ index }}
         </van-tab>
       </van-tabs>
     </demo-block>
 
-    <demo-block :title="$t('matchByName')">
+    <demo-block :title="t('matchByName')">
       <van-tabs v-model="activeName">
-        <van-tab name="a" :title="$t('tab') + 1">
-          {{ $t('content') }} 1
-        </van-tab>
-        <van-tab name="b" :title="$t('tab') + 2">
-          {{ $t('content') }} 2
-        </van-tab>
-        <van-tab name="c" :title="$t('tab') + 3">
-          {{ $t('content') }} 3
-        </van-tab>
+        <van-tab name="a" :title="t('tab') + 1"> {{ t('content') }} 1 </van-tab>
+        <van-tab name="b" :title="t('tab') + 2"> {{ t('content') }} 2 </van-tab>
+        <van-tab name="c" :title="t('tab') + 3"> {{ t('content') }} 3 </van-tab>
       </van-tabs>
     </demo-block>
 
-    <demo-block :title="$t('title2')">
+    <demo-block :title="t('title2')">
       <van-tabs>
-        <van-tab v-for="index in 8" :title="$t('tab') + index" :key="index">
-          {{ $t('content') }} {{ index }}
+        <van-tab v-for="index in 8" :title="t('tab') + index" :key="index">
+          {{ t('content') }} {{ index }}
         </van-tab>
       </van-tabs>
     </demo-block>
 
-    <demo-block :title="$t('title3')">
+    <demo-block :title="t('title3')">
       <van-tabs @disabled="onClickDisabled">
         <van-tab
           v-for="index in 3"
-          :title="$t('tab') + index"
+          :title="t('tab') + index"
           :disabled="index === 2"
           :key="index"
         >
-          {{ $t('content') }} {{ index }}
+          {{ t('content') }} {{ index }}
         </van-tab>
       </van-tabs>
     </demo-block>
 
-    <demo-block :title="$t('title4')">
+    <demo-block :title="t('title4')">
       <van-tabs type="card">
-        <van-tab v-for="index in 3" :title="$t('tab') + index" :key="index">
-          {{ $t('content') }} {{ index }}
+        <van-tab v-for="index in 3" :title="t('tab') + index" :key="index">
+          {{ t('content') }} {{ index }}
         </van-tab>
       </van-tabs>
     </demo-block>
 
-    <demo-block :title="$t('title5')">
+    <demo-block :title="t('title5')">
       <van-tabs @click="onClick">
-        <van-tab v-for="index in 2" :title="$t('tab') + index" :key="index">
-          {{ $t('content') }} {{ index }}
+        <van-tab v-for="index in 2" :title="t('tab') + index" :key="index">
+          {{ t('content') }} {{ index }}
         </van-tab>
       </van-tabs>
     </demo-block>
 
-    <demo-block :title="$t('title6')">
+    <demo-block :title="t('title6')">
       <van-tabs :active="active" sticky>
-        <van-tab :title="$t('tab') + index" v-for="index in tabs" :key="index">
-          {{ $t('content') }} {{ index }}
+        <van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
+          {{ t('content') }} {{ index }}
         </van-tab>
       </van-tabs>
     </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="$t('title7')">
+    <demo-block v-if="!isWeapp" :title="t('title7')">
       <van-tabs :active="active">
         <van-tab v-for="index in 2" :key="index">
-          <template #title>
-            <van-icon name="more-o" />{{ $t('tab') }}
-          </template>
-          {{ $t('content') }} {{ index }}
+          <template #title> <van-icon name="more-o" />{{ t('tab') }} </template>
+          {{ t('content') }} {{ index }}
         </van-tab>
       </van-tabs>
     </demo-block>
 
-    <demo-block :title="$t('title8')">
+    <demo-block :title="t('title8')">
       <van-tabs animated>
-        <van-tab :title="$t('tab') + index" v-for="index in tabs" :key="index">
-          {{ $t('content') }} {{ index }}
+        <van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
+          {{ t('content') }} {{ index }}
         </van-tab>
       </van-tabs>
     </demo-block>
 
-    <demo-block :title="$t('title9')">
+    <demo-block :title="t('title9')">
       <van-tabs :active="active" swipeable>
-        <van-tab :title="$t('tab') + index" v-for="index in tabs" :key="index">
-          {{ $t('content') }} {{ index }}
+        <van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
+          {{ t('content') }} {{ index }}
         </van-tab>
       </van-tabs>
     </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="$t('title10')">
+    <demo-block v-if="!isWeapp" :title="t('title10')">
       <van-tabs scrollspy sticky>
-        <van-tab :title="$t('tab') + index" v-for="index in 8" :key="index">
-          {{ $t('content') }} {{ index }}
+        <van-tab :title="t('tab') + index" v-for="index in 8" :key="index">
+          {{ t('content') }} {{ index }}
         </van-tab>
       </van-tabs>
     </demo-block>
@@ -148,7 +140,7 @@ export default {
 
   methods: {
     onClickDisabled(index, title) {
-      this.$toast(title + this.$t('disabled'));
+      this.$toast(title + this.t('disabled'));
     },
 
     onClick(index, title) {
diff --git a/src/tabbar/demo/index.vue b/src/tabbar/demo/index.vue
index 081e8c80a..40717a09d 100644
--- a/src/tabbar/demo/index.vue
+++ b/src/tabbar/demo/index.vue
@@ -1,76 +1,76 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-tabbar v-model="active">
-        <van-tabbar-item icon="home-o">{{ $t('tab') }}</van-tabbar-item>
-        <van-tabbar-item icon="search">{{ $t('tab') }}</van-tabbar-item>
-        <van-tabbar-item icon="friends-o">{{ $t('tab') }}</van-tabbar-item>
-        <van-tabbar-item icon="setting-o">{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="home-o">{{ t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="search">{{ t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="friends-o">{{ t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="setting-o">{{ t('tab') }}</van-tabbar-item>
       </van-tabbar>
     </demo-block>
 
-    <demo-block :title="$t('matchByName')">
+    <demo-block :title="t('matchByName')">
       <van-tabbar v-model="activeName">
         <van-tabbar-item name="home" icon="home-o">
-          {{ $t('tab') }}
+          {{ t('tab') }}
         </van-tabbar-item>
         <van-tabbar-item name="search" icon="search">
-          {{ $t('tab') }}
+          {{ t('tab') }}
         </van-tabbar-item>
         <van-tabbar-item name="friends" icon="friends-o">
-          {{ $t('tab') }}
+          {{ t('tab') }}
         </van-tabbar-item>
         <van-tabbar-item name="setting" icon="setting-o">
-          {{ $t('tab') }}
+          {{ t('tab') }}
         </van-tabbar-item>
       </van-tabbar>
     </demo-block>
 
-    <demo-block :title="$t('badge')">
+    <demo-block :title="t('badge')">
       <van-tabbar v-model="active2">
-        <van-tabbar-item icon="home-o">{{ $t('tab') }}</van-tabbar-item>
-        <van-tabbar-item icon="search" dot>{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="home-o">{{ t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="search" dot>{{ t('tab') }}</van-tabbar-item>
         <van-tabbar-item icon="friends-o" badge="5">
-          {{ $t('tab') }}
+          {{ t('tab') }}
         </van-tabbar-item>
         <van-tabbar-item icon="setting-o" badge="20">
-          {{ $t('tab') }}
+          {{ t('tab') }}
         </van-tabbar-item>
       </van-tabbar>
     </demo-block>
 
-    <demo-block :title="$t('customIcon')">
+    <demo-block :title="t('customIcon')">
       <van-tabbar v-model="active3">
         <van-tabbar-item badge="3">
-          <span>{{ $t('custom') }}</span>
+          <span>{{ t('custom') }}</span>
           <template #icon="props">
             <img :src="props.active ? icon.active : icon.inactive" />
           </template>
         </van-tabbar-item>
-        <van-tabbar-item icon="search">{{ $t('tab') }}</van-tabbar-item>
-        <van-tabbar-item icon="setting-o">{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="search">{{ t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="setting-o">{{ t('tab') }}</van-tabbar-item>
       </van-tabbar>
     </demo-block>
 
-    <demo-block :title="$t('customColor')">
+    <demo-block :title="t('customColor')">
       <van-tabbar
         v-model="active4"
         active-color="#07c160"
         inactive-color="#000"
       >
-        <van-tabbar-item icon="home-o">{{ $t('tab') }}</van-tabbar-item>
-        <van-tabbar-item icon="search">{{ $t('tab') }}</van-tabbar-item>
-        <van-tabbar-item icon="friends-o">{{ $t('tab') }}</van-tabbar-item>
-        <van-tabbar-item icon="setting-o">{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="home-o">{{ t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="search">{{ t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="friends-o">{{ t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="setting-o">{{ t('tab') }}</van-tabbar-item>
       </van-tabbar>
     </demo-block>
 
-    <demo-block :title="$t('switchEvent')">
+    <demo-block :title="t('switchEvent')">
       <van-tabbar v-model="active5" @change="onChange">
-        <van-tabbar-item icon="home-o">{{ $t('tab') + 1 }}</van-tabbar-item>
-        <van-tabbar-item icon="search">{{ $t('tab') + 2 }}</van-tabbar-item>
-        <van-tabbar-item icon="friends-o">{{ $t('tab') + 3 }}</van-tabbar-item>
-        <van-tabbar-item icon="setting-o">{{ $t('tab') + 4 }}</van-tabbar-item>
+        <van-tabbar-item icon="home-o">{{ t('tab') + 1 }}</van-tabbar-item>
+        <van-tabbar-item icon="search">{{ t('tab') + 2 }}</van-tabbar-item>
+        <van-tabbar-item icon="friends-o">{{ t('tab') + 3 }}</van-tabbar-item>
+        <van-tabbar-item icon="setting-o">{{ t('tab') + 4 }}</van-tabbar-item>
       </van-tabbar>
     </demo-block>
   </demo-section>
@@ -116,7 +116,7 @@ export default {
     onChange(index) {
       this.$notify({
         type: 'primary',
-        message: `${this.$t('selectTip')} ${this.$t('tab')}${index + 1}`,
+        message: `${this.t('selectTip')} ${this.t('tab')}${index + 1}`,
       });
     },
   },
diff --git a/src/tag/demo/index.vue b/src/tag/demo/index.vue
index f3d93c975..6669b2ad7 100644
--- a/src/tag/demo/index.vue
+++ b/src/tag/demo/index.vue
@@ -1,52 +1,52 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
-      <van-tag>{{ $t('tag') }}</van-tag>
-      <van-tag type="primary">{{ $t('tag') }}</van-tag>
-      <van-tag type="success">{{ $t('tag') }}</van-tag>
-      <van-tag type="danger">{{ $t('tag') }}</van-tag>
-      <van-tag type="warning">{{ $t('tag') }}</van-tag>
+    <demo-block :title="t('basicUsage')">
+      <van-tag>{{ t('tag') }}</van-tag>
+      <van-tag type="primary">{{ t('tag') }}</van-tag>
+      <van-tag type="success">{{ t('tag') }}</van-tag>
+      <van-tag type="danger">{{ t('tag') }}</van-tag>
+      <van-tag type="warning">{{ t('tag') }}</van-tag>
     </demo-block>
 
-    <demo-block :title="$t('round')">
-      <van-tag round>{{ $t('tag') }}</van-tag>
-      <van-tag round type="primary">{{ $t('tag') }}</van-tag>
-      <van-tag round type="success">{{ $t('tag') }}</van-tag>
-      <van-tag round type="danger">{{ $t('tag') }}</van-tag>
-      <van-tag round type="warning">{{ $t('tag') }}</van-tag>
+    <demo-block :title="t('round')">
+      <van-tag round>{{ t('tag') }}</van-tag>
+      <van-tag round type="primary">{{ t('tag') }}</van-tag>
+      <van-tag round type="success">{{ t('tag') }}</van-tag>
+      <van-tag round type="danger">{{ t('tag') }}</van-tag>
+      <van-tag round type="warning">{{ t('tag') }}</van-tag>
     </demo-block>
 
-    <demo-block :title="$t('mark')">
-      <van-tag mark>{{ $t('tag') }}</van-tag>
-      <van-tag mark type="primary">{{ $t('tag') }}</van-tag>
-      <van-tag mark type="success">{{ $t('tag') }}</van-tag>
-      <van-tag mark type="danger">{{ $t('tag') }}</van-tag>
-      <van-tag mark type="warning">{{ $t('tag') }}</van-tag>
+    <demo-block :title="t('mark')">
+      <van-tag mark>{{ t('tag') }}</van-tag>
+      <van-tag mark type="primary">{{ t('tag') }}</van-tag>
+      <van-tag mark type="success">{{ t('tag') }}</van-tag>
+      <van-tag mark type="danger">{{ t('tag') }}</van-tag>
+      <van-tag mark type="warning">{{ t('tag') }}</van-tag>
     </demo-block>
 
-    <demo-block :title="$t('plain')">
-      <van-tag plain>{{ $t('tag') }}</van-tag>
-      <van-tag plain type="primary">{{ $t('tag') }}</van-tag>
-      <van-tag plain type="success">{{ $t('tag') }}</van-tag>
-      <van-tag plain type="danger">{{ $t('tag') }}</van-tag>
-      <van-tag plain type="warning">{{ $t('tag') }}</van-tag>
+    <demo-block :title="t('plain')">
+      <van-tag plain>{{ t('tag') }}</van-tag>
+      <van-tag plain type="primary">{{ t('tag') }}</van-tag>
+      <van-tag plain type="success">{{ t('tag') }}</van-tag>
+      <van-tag plain type="danger">{{ t('tag') }}</van-tag>
+      <van-tag plain type="warning">{{ t('tag') }}</van-tag>
     </demo-block>
 
-    <demo-block :title="$t('customColor')">
-      <van-tag color="#f2826a">{{ $t('tag') }}</van-tag>
-      <van-tag color="#f2826a" plain>{{ $t('tag') }}</van-tag>
-      <van-tag color="#7232dd">{{ $t('tag') }}</van-tag>
-      <van-tag color="#7232dd" plain>{{ $t('tag') }}</van-tag>
-      <van-tag color="#ffe1e1" text-color="#ad0000">{{ $t('tag') }}</van-tag>
+    <demo-block :title="t('customColor')">
+      <van-tag color="#f2826a">{{ t('tag') }}</van-tag>
+      <van-tag color="#f2826a" plain>{{ t('tag') }}</van-tag>
+      <van-tag color="#7232dd">{{ t('tag') }}</van-tag>
+      <van-tag color="#7232dd" plain>{{ t('tag') }}</van-tag>
+      <van-tag color="#ffe1e1" text-color="#ad0000">{{ t('tag') }}</van-tag>
     </demo-block>
 
-    <demo-block :title="$t('customSize')">
-      <van-tag type="success">{{ $t('tag') }}</van-tag>
-      <van-tag type="success" size="medium">{{ $t('tag') }}</van-tag>
-      <van-tag type="success" size="large">{{ $t('tag') }}</van-tag>
+    <demo-block :title="t('customSize')">
+      <van-tag type="success">{{ t('tag') }}</van-tag>
+      <van-tag type="success" size="medium">{{ t('tag') }}</van-tag>
+      <van-tag type="success" size="large">{{ t('tag') }}</van-tag>
     </demo-block>
 
-    <demo-block :title="$t('closeable')">
+    <demo-block :title="t('closeable')">
       <van-tag
         v-if="show.primary"
         size="medium"
@@ -54,7 +54,7 @@
         type="primary"
         @close="close('primary')"
       >
-        {{ $t('tag') }}
+        {{ t('tag') }}
       </van-tag>
       <van-tag
         v-if="show.success"
@@ -63,7 +63,7 @@
         type="success"
         @close="close('success')"
       >
-        {{ $t('tag') }}
+        {{ t('tag') }}
       </van-tag>
     </demo-block>
   </demo-section>
diff --git a/src/toast/demo/index.vue b/src/toast/demo/index.vue
index 871b833cb..291bdaffe 100644
--- a/src/toast/demo/index.vue
+++ b/src/toast/demo/index.vue
@@ -1,53 +1,53 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('title1')">
+    <demo-block :title="t('title1')">
       <van-button
         type="primary"
-        :text="$t('title1')"
-        @click="$toast($t('text'))"
+        :text="t('title1')"
+        @click="$toast(t('text'))"
       />
       <van-button
         type="primary"
-        :text="$t('longTextButton')"
-        @click="$toast($t('longText'))"
+        :text="t('longTextButton')"
+        @click="$toast(t('longText'))"
       />
     </demo-block>
 
-    <demo-block :title="$t('title2')">
+    <demo-block :title="t('title2')">
       <van-button
         type="primary"
-        :text="$t('title2')"
+        :text="t('title2')"
         @click="showLoadingToast()"
       />
       <van-button
         type="primary"
-        :text="$t('loadingType')"
+        :text="t('loadingType')"
         @click="showLoadingToast('spinner')"
       />
     </demo-block>
 
-    <demo-block :title="$t('title3')">
-      <van-button type="info" :text="$t('success')" @click="showSuccessToast" />
-      <van-button type="danger" :text="$t('fail')" @click="showFailToast" />
+    <demo-block :title="t('title3')">
+      <van-button type="info" :text="t('success')" @click="showSuccessToast" />
+      <van-button type="danger" :text="t('fail')" @click="showFailToast" />
     </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="$t('customIcon')">
+    <demo-block v-if="!isWeapp" :title="t('customIcon')">
       <van-button
         type="primary"
-        :text="$t('customIcon')"
+        :text="t('customIcon')"
         @click="showIconToast"
       />
       <van-button
         type="primary"
-        :text="$t('customImage')"
+        :text="t('customImage')"
         @click="showImageToast"
       />
     </demo-block>
 
-    <demo-block :title="$t('updateMessage')">
+    <demo-block :title="t('updateMessage')">
       <van-button
         type="primary"
-        :text="$t('updateMessage')"
+        :text="t('updateMessage')"
         @click="showCustomizedToast"
       />
     </demo-block>
@@ -98,29 +98,29 @@ export default {
     showLoadingToast(loadingType) {
       this.$toast.loading({
         forbidClick: true,
-        message: this.$t('loading'),
+        message: this.t('loading'),
         loadingType,
       });
     },
 
     showSuccessToast() {
-      this.$toast.success(this.$t('text2'));
+      this.$toast.success(this.t('text2'));
     },
 
     showFailToast() {
-      this.$toast.fail(this.$t('text3'));
+      this.$toast.fail(this.t('text3'));
     },
 
     showIconToast() {
       this.$toast({
-        message: this.$t('customIcon'),
+        message: this.t('customIcon'),
         icon: 'like-o',
       });
     },
 
     showImageToast() {
       this.$toast({
-        message: this.$t('customImage'),
+        message: this.t('customImage'),
         icon: 'https://img.yzcdn.cn/vant/logo.png',
       });
     },
@@ -129,14 +129,14 @@ export default {
       const toast = this.$toast.loading({
         duration: 0,
         forbidClick: true,
-        message: this.$t('text4', 3),
+        message: this.t('text4', 3),
       });
 
       let second = 3;
       const timer = setInterval(() => {
         second--;
         if (second) {
-          toast.message = this.$t('text4', second);
+          toast.message = this.t('text4', second);
         } else {
           clearInterval(timer);
           this.$toast.clear();
diff --git a/src/tree-select/demo/index.vue b/src/tree-select/demo/index.vue
index 97ff8257b..029f86bd5 100644
--- a/src/tree-select/demo/index.vue
+++ b/src/tree-select/demo/index.vue
@@ -1,6 +1,6 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('radioMode')">
+    <demo-block :title="t('radioMode')">
       <van-tree-select
         :items="items"
         :active-id.sync="activeId"
@@ -8,7 +8,7 @@
       />
     </demo-block>
 
-    <demo-block :title="$t('multipleMode')">
+    <demo-block :title="t('multipleMode')">
       <van-tree-select
         :items="items"
         :active-id.sync="activeIds"
@@ -16,7 +16,7 @@
       />
     </demo-block>
 
-    <demo-block :title="$t('customContent')">
+    <demo-block :title="t('customContent')">
       <van-tree-select
         height="55vw"
         :items="simpleItems"
@@ -35,7 +35,7 @@
       </van-tree-select>
     </demo-block>
 
-    <demo-block :title="$t('showBadge')">
+    <demo-block :title="t('showBadge')">
       <van-tree-select
         height="55vw"
         :items="badgeItems"
@@ -85,15 +85,15 @@ export default {
 
   computed: {
     items() {
-      return this.$t('data');
+      return this.t('data');
     },
 
     simpleItems() {
-      return this.$t('dataSimple');
+      return this.t('dataSimple');
     },
 
     badgeItems() {
-      const data = deepClone(this.$t('data')).slice(0, 2);
+      const data = deepClone(this.t('data')).slice(0, 2);
 
       data[0].dot = true;
       data[1].badge = 5;
diff --git a/src/uploader/demo/index.vue b/src/uploader/demo/index.vue
index a8b33610b..6d44ec725 100644
--- a/src/uploader/demo/index.vue
+++ b/src/uploader/demo/index.vue
@@ -1,34 +1,34 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="t('basicUsage')">
       <van-uploader :after-read="afterRead" />
     </demo-block>
 
-    <demo-block :title="$t('preview')">
+    <demo-block :title="t('preview')">
       <van-uploader v-model="fileList" multiple accept="*" />
     </demo-block>
 
-    <demo-block :title="$t('disabled')">
+    <demo-block :title="t('disabled')">
       <van-uploader :after-read="afterRead" disabled />
     </demo-block>
 
-    <demo-block v-if="!isWeapp" :title="$t('status')">
+    <demo-block v-if="!isWeapp" :title="t('status')">
       <van-uploader v-model="statusFileList" :after-read="afterReadFailed" />
     </demo-block>
 
-    <demo-block :title="$t('maxCount')">
+    <demo-block :title="t('maxCount')">
       <van-uploader v-model="fileList2" multiple :max-count="2" />
     </demo-block>
 
-    <demo-block :title="$t('uploadStyle')">
+    <demo-block :title="t('uploadStyle')">
       <van-uploader>
         <van-button type="primary" icon="photo">
-          {{ this.$t('upload') }}
+          {{ this.t('upload') }}
         </van-button>
       </van-uploader>
     </demo-block>
 
-    <demo-block :title="$t('beforeRead')">
+    <demo-block :title="t('beforeRead')">
       <van-uploader v-model="fileList3" :before-read="beforeRead" />
     </demo-block>
   </demo-section>
@@ -80,12 +80,12 @@ export default {
       {
         url: 'https://img.yzcdn.cn/vant/leaf.jpg',
         status: 'uploading',
-        message: this.$t('uploading'),
+        message: this.t('uploading'),
       },
       {
         url: 'https://img.yzcdn.cn/vant/tree.jpg',
         status: 'failed',
-        message: this.$t('failed'),
+        message: this.t('failed'),
       }
     );
   },
@@ -93,7 +93,7 @@ export default {
   methods: {
     beforeRead(file) {
       if (file.type !== 'image/jpeg') {
-        this.$toast(this.$t('invalidType'));
+        this.$toast(this.t('invalidType'));
         return false;
       }
 
@@ -106,11 +106,11 @@ export default {
 
     afterReadFailed(item) {
       item.status = 'uploading';
-      item.message = this.$t('uploading');
+      item.message = this.t('uploading');
 
       setTimeout(() => {
         item.status = 'failed';
-        item.message = this.$t('failed');
+        item.message = this.t('failed');
       }, 1000);
     },
   },