Vue Re23 元件封裝

/*

演示案例是base.css 
*/body 

路由配置：

import vue from 'vue'import router from 'vue-router'vue.use(router)

const routelist =[
,  ,
,  ,
,];const route =  new
router()
export 
default route;

<

template
>
<
div 
id><
tab-bar
>
tab-bar
>
<
router-view
>
router-view
>
div>
template
>
<
script
>import tabbar from
'./components/tab-bar/tab-bar
';export 
default
}script
>
<
style
>@import './assets/css/common.css';
style
>

<

template
>
<
div 
id="tab-bar"
>
<
tab-bar-item 
path
="/home"
activecolor
="red"
>
<
img 
src="./../../assets/img/tab-bar/deactive/home.png"
alt="home"
slot
="item-icon"
>
<
img 
src="./../../assets/img/tab-bar/active/home.png"
alt="home2"
slot
="item-icon-active"
>
<
div 
slot
="item-text"
>首頁
div>
tab-bar-item
>
<
tab-bar-item 
path
="/category"
activecolor
="blue"
>
<
img 
src="./../../assets/img/tab-bar/deactive/category.png"
alt="category"
slot
="item-icon"
>
<
img 
src="./../../assets/img/tab-bar/active/category.png"
alt="category2"
slot
="item-icon-active"
>
<
div 
slot
="item-text"
>分類
div>
tab-bar-item
>
<
tab-bar-item 
path
="/cart"
activecolor
="orange"
>
<
img 
src="./../../assets/img/tab-bar/deactive/cart.png"
alt="cart"
slot
="item-icon"
>
<
img 
src="./../../assets/img/tab-bar/active/cart.png"
alt="cart2"
slot
="item-icon-active"
>
<
div 
slot
="item-text"
>購物車
div>
tab-bar-item
>
<
tab-bar-item 
path
="/profile"
activecolor
="green"
>
<
img 
src="./../../assets/img/tab-bar/deactive/mine.png"
alt="mine"
slot
="item-icon"
>
<
img 
src="./../../assets/img/tab-bar/active/mine.png"
alt="mine2"
slot
="item-icon-active"
>
<
div 
slot
="item-text"
>我的
div>
tab-bar-item
>
div>
template
>
<
script
>
import tabbaritem from 
'./tab-bar-item';
export 
default
}script
>
<
style 
scoped
>
#tab-bar 
.tab-bar-item 
.tab-bar-item img 
style
>

<

template
>
<
div 
class
="tab-bar-item"
@click
="itemclick"
>
<
div 
v-if
="!isactive"
>
<
slot 
name
="item-icon"
>
slot
>
div>
<
div 
v-else 
>
<
slot 
name
="item-icon-active"
>
slot
>
div>
<
div 
:style
="activestyle"
>
<
slot 
name
="item-text"
>
slot
>
div>
div>
template
>
<
script
>
export 
default
},data () 
},computed : ,
activestyle ()  : {}}},
methods : 
}}script
>
<
style 
scoped
>
/*.active 
*/style
>

Vue2 元件封裝

接觸乙個前端框架，除了基礎的使用語法以外我們接下來都會很關心元件和復用的問題。以下就是個簡單的例子。下面是在父元件中引入子元件的 片段 booklist out container booklist container for book in books book book div button c...

weex學習之路 二 元件封裝（1）

不管是為了解耦還是為了 的復用，元件封裝都是必須要的。因為weex使用flex布局，所以每個頁面都可以抽象成 頭部 頂部導航 身體 主體內容 腳 底部 當然，並不是所有的頁面存在這3個要素，所以元件需要支援一些配置，具體 如下 flex direction column justify conten...

元件 1 元件定義

使用vue.extend options 定義元件，引數為乙個包含了被定義組選項的物件。使用vue.component id,definition 註冊定義好的元件，id為該元件名稱。definition 既可以是乙個extend 返回的例項，也可以是乙個包含元件選項的物件 將會自動呼叫extend...