Vue 帶你封裝乙個 button

作為乙個後端程式設計師偶爾搞搞前端，對我自己來說是開啟新的領域，提高自己的競爭力，說實話搞前端和搞後端的思維方式是完全不同的，注重點也是非常不同的，話說今天寶寶我農曆生日哈哈哈哈，開心就寫幾篇放縱一下。

建立乙個 showbutton.vue 的元件

/h1>

"value === 1"
>
"buttonclick()"
>button1<
/button>
<
/div>
else-if
="value === 2"
>
"buttonclick()"
>button2<
/button>
<
/div>
else
>
"buttonclick()"
>button3<
/button>
<
/div>
<
/div>
<
/template>
export
default;}
, methods:}}
;<
/script>
<
/style>這裡用了vue 裡的 v-if 表示式做邏輯判斷，但是如果有 10 個按鈕，那麼就需要寫 10 個 判斷，而且如果該元件還將被別的頁面引用到，那就得還得複製一遍。**一點也不優雅呀。
我們借助於vue
給我們提供的render函式解決這個問題。
新建乙個 button.vue

default

, text:},

render

(h),

domprops:

, on:})

},methods:}}

<

/script>

.btn

.btn-success

.btn-danger

.btn-warning

.btn-normal

<

/style>showbutton.vue 內使用

vue 封裝乙個外掛程式

1 建立乙個vue元件button button.vue 2 vue.js 的外掛程式有乙個公開方法install方法，第乙個引數是vue構造器，第二個引數是乙個可選的選項物件，我們可以通過這個方法來定義外掛程式button index.js import buttoncom from button...

vue如何封裝乙個元件

1.新增子元件 在工程src components目錄下新建乙個資料夾用於存放元件。我封裝了乙個樹元件，資料夾名稱為va tree,裡面有乙個va tree.vue檔案，寫了樹元件的具體內容，包括元件樣式 元件處理邏輯 元件模板等等 子元件中定義的props是父元件需要傳給子元件的資料，在子元件中p...

vue封裝乙個彈框元件

這是乙個提示框和對話方塊，例 取消 div div class kz btn click took 確定 div div div div template script export default took function script style scoped kz cont kz cont ...