vue組件的模板分離寫(xiě)法

lt;!DOCTYPE html>

<html>

<head>

<title>vue組件的模板分離寫(xiě)法</title>

.hezi{

width: 300px;

height: 250px;

border: #000000 solid 1px;

}

</style>

</head>

<body>

</div>

<!-- <script type="text/x-template" id="app-hezi">

</div>

</script> -->

</div>

</template>

Vue.component('cpn',{

template: '#app-hezi'

})

const app=new Vue({

el: '#app',

data:{

}

})

</script>

</body>

</html>

、明確前后端分離和前后端不分離的概念：

我的理解：前后端不分離的概念是后端要控制前端的數(shù)據(jù)顯示和模板渲染（django），它有一個(gè)缺點(diǎn)就是可復(fù)用性不強(qiáng)，也就是它的后端程序只適用于一種前端類(lèi)型，比如返回的是網(wǎng)頁(yè)模板，則它只能用于網(wǎng)頁(yè)端，移動(dòng)端要用只能重新渲染一個(gè)移動(dòng)端的模板。

而前后端分離則解決了這一問(wèn)題，它的可復(fù)用性極強(qiáng)，一個(gè)后端可對(duì)接多個(gè)類(lèi)型的前端，因?yàn)樗皇褂媚０澹峭ㄟ^(guò)向前端傳遞json數(shù)據(jù)的方式，將頁(yè)面渲染和顯示數(shù)據(jù)交給前端去做。這樣寫(xiě)出來(lái)的后端可以適用于任何類(lèi)型的前端。

二、項(xiàng)目的數(shù)據(jù)庫(kù)設(shè)計(jì)：

三、模型類(lèi)設(shè)計(jì)

class BaseModel(object):

"""模型基類(lèi)，為每個(gè)模型補(bǔ)充創(chuàng)建時(shí)間與更新時(shí)間"""

create_time=db.Column(db.DateTime, default=datetime.now) # 記錄的創(chuàng)建時(shí)間

update_time=db.Column(db.DateTime, default=datetime.now, onupdate=datetime.now) # 記錄的更新時(shí)間

class User(BaseModel, db.Model):

"""用戶(hù)"""

__tablename__= "ih_user_profile"

id=db.Column(db.Integer, primary_key=True) # 用戶(hù)編號(hào)

name=db.Column(db.String(32), unique=True, nullable=False) # 用戶(hù)暱稱(chēng)

password_hash=db.Column(db.String(128), nullable=False) # 加密的密碼

mobile=db.Column(db.String(11), unique=True, nullable=False) # 手機(jī)號(hào)

real_name=db.Column(db.String(32)) # 真實(shí)姓名

id_card=db.Column(db.String(20)) # 身份證號(hào)

avatar_url=db.Column(db.String(128)) # 用戶(hù)頭像路徑

houses=db.relationship("House", backref="user") # 用戶(hù)發(fā)布的房屋

orders=db.relationship("Order", backref="user") # 用戶(hù)下的訂單

class Area(BaseModel, db.Model):

"""城區(qū)"""

__tablename__= "ih_area_info"

id=db.Column(db.Integer, primary_key=True) # 區(qū)域編號(hào)

name=db.Column(db.String(32), nullable=False) # 區(qū)域名字

houses=db.relationship("House", backref="area") # 區(qū)域的房屋

# 房屋設(shè)施表，建立房屋與設(shè)施的多對(duì)多關(guān)系

house_facility=db.Table(

"ih_house_facility",

db.Column("house_id", db.Integer, db.ForeignKey("ih_house_info.id"), primary_key=True), # 房屋編號(hào)

db.Column("facility_id", db.Integer, db.ForeignKey("ih_facility_info.id"), primary_key=True) # 設(shè)施編號(hào)

)

class House(BaseModel, db.Model):

"""房屋信息"""

__tablename__= "ih_house_info"

id=db.Column(db.Integer, primary_key=True) # 房屋編號(hào)

user_id=db.Column(db.Integer, db.ForeignKey("ih_user_profile.id"), nullable=False) # 房屋主人的用戶(hù)編號(hào)

area_id=db.Column(db.Integer, db.ForeignKey("ih_area_info.id"), nullable=False) # 歸屬地的區(qū)域編號(hào)

title=db.Column(db.String(64), nullable=False) # 標(biāo)題

price=db.Column(db.Integer, default=0) # 單價(jià)，單位：分

address=db.Column(db.String(512), default="") # 地址

room_count=db.Column(db.Integer, default=1) # 房間數(shù)目

acreage=db.Column(db.Integer, default=0) # 房屋面積

unit=db.Column(db.String(32), default="") # 房屋單元，如幾室?guī)讖d

capacity=db.Column(db.Integer, default=1) # 房屋容納的人數(shù)

beds=db.Column(db.String(64), default="") # 房屋床鋪的配置

deposit=db.Column(db.Integer, default=0) # 房屋押金

min_days=db.Column(db.Integer, default=1) # 最少入住天數(shù)

max_days=db.Column(db.Integer, default=0) # 最多入住天數(shù)，0表示不限制

order_count=db.Column(db.Integer, default=0) # 預(yù)訂完成的該房屋的訂單數(shù)

index_image_url=db.Column(db.String(256), default="") # 房屋主圖片的路徑

facilities=db.relationship("Facility", secondary=house_facility) # 房屋的設(shè)施

images=db.relationship("HouseImage") # 房屋的圖片

orders=db.relationship("Order", backref="house") # 房屋的訂單

class Facility(BaseModel, db.Model):

"""設(shè)施信息"""

__tablename__= "ih_facility_info"

id=db.Column(db.Integer, primary_key=True) # 設(shè)施編號(hào)

name=db.Column(db.String(32), nullable=False) # 設(shè)施名字

class HouseImage(BaseModel, db.Model):

"""房屋圖片"""

__tablename__= "ih_house_image"

id=db.Column(db.Integer, primary_key=True)

house_id=db.Column(db.Integer, db.ForeignKey("ih_house_info.id"), nullable=False) # 房屋編號(hào)

url=db.Column(db.String(256), nullable=False) # 圖片的路徑

class Order(BaseModel, db.Model):

"""訂單"""

__tablename__= "ih_order_info"

id=db.Column(db.Integer, primary_key=True) # 訂單編號(hào)

user_id=db.Column(db.Integer, db.ForeignKey("ih_user_profile.id"), nullable=False) # 下訂單的用戶(hù)編號(hào)

house_id=db.Column(db.Integer, db.ForeignKey("ih_house_info.id"), nullable=False) # 預(yù)訂的房間編號(hào)

begin_date=db.Column(db.DateTime, nullable=False) # 預(yù)訂的起始時(shí)間

end_date=db.Column(db.DateTime, nullable=False) # 預(yù)訂的結(jié)束時(shí)間

days=db.Column(db.Integer, nullable=False) # 預(yù)訂的總天數(shù)

house_price=db.Column(db.Integer, nullable=False) # 房屋的單價(jià)

amount=db.Column(db.Integer, nullable=False) # 訂單的總金額

status=db.Column( # 訂單的狀態(tài)

db.Enum(

"WAIT_ACCEPT", # 待接單,

"WAIT_PAYMENT", # 待支付

"PAID", # 已支付

"WAIT_COMMENT", # 待評(píng)價(jià)

"COMPLETE", # 已完成

"CANCELED", # 已取消

"REJECTED" # 已拒單

default="WAIT_ACCEPT", index=True)

comment=db.Column(db.Text) # 訂單的評(píng)論信息或者拒單原因

四、數(shù)據(jù)庫(kù)遷移

python manage.py db init

python manage.py db migrate -m 'init tables'

五、項(xiàng)目架構(gòu)

5.1項(xiàng)目的整體目錄如下圖所示：

5.2 ihome的目錄結(jié)構(gòu)：

六、項(xiàng)目整體架構(gòu)配置：

6.1主目錄下config.py文件主要是配置數(shù)據(jù)庫(kù)和redis緩存

6.2 ihome目錄下的__init__.py文件主要是創(chuàng)建app對(duì)象：

6.3主目錄下的manage.py用來(lái)運(yùn)行項(xiàng)目代碼：

6.4 ihome目錄下的web_html.py文件用來(lái)配置靜態(tài)文件的藍(lán)圖

6.5在ihome/utils/commons.py文件中定義正則轉(zhuǎn)換器：

. Vue組件名推薦使用駝峰命名

現(xiàn)在我們來(lái)看看為什么在Vue中推薦注冊(cè)組件是使用駝峰寫(xiě)法, 在了解這個(gè)之前,詳細(xì)大家應(yīng)該都能明白為什么在Vue中, 局部組件的使用頻率高于全局組件.

推薦使用駝峰寫(xiě)法也是和局部組件有關(guān)系

我們先看一個(gè)示例

<div id="app">
    <!-- 3. 在注冊(cè)了局部組件的實(shí)例中使用局部組件 -->
    <my-component></my-component>
</div>


<script>
    // 1. 創(chuàng)建局部組件的選項(xiàng)對(duì)象
    let MyComponent={
        template: `
            <div>
                <h2>局部組件</h2>
            </div>
        `,
    }

    const vm=new Vue({
        el:"#app",
        // 2. 將選項(xiàng)對(duì)象注冊(cè)為局部組件
        components: {
            "my-component": MyComponent
        }

    })
</script>

通過(guò)前面的學(xué)習(xí),這個(gè)例子應(yīng)該已經(jīng)熟悉了,

首先定義一個(gè)選項(xiàng)對(duì)象myComponent
在Vue實(shí)例中通過(guò)components注冊(cè)為局部組件
在HTML模板中通過(guò)<my-component>自定義標(biāo)簽使用組件

示例中,不使用駝峰命名組件,依然可以正常運(yùn)行,那么為什么組件名還要推薦使用駝峰命名

那先看下面幾點(diǎn):

首先在定義選項(xiàng)對(duì)象的時(shí)候使用的變量名絕對(duì)不可以是連字符, 這是標(biāo)識(shí)符命名規(guī)范,因此如果要使用連字符就必須加引號(hào)
在注冊(cè)組件是,components中的屬性名my-component就是我們的組件名稱(chēng), 其值MyComponent就是將誰(shuí)注冊(cè)為組件

好此時(shí)大家想一想,如果組件名和選項(xiàng)對(duì)象的變量名一樣會(huì)怎么樣

是不是就會(huì)變成如下的寫(xiě)法

const vm=new Vue({
    el:"#app",
    components: {
        MyComponent: MyComponent
    }
})

在思考一下,我們之前在學(xué)習(xí)ES6的時(shí)候講過(guò)在定義對(duì)象的是有一種簡(jiǎn)便寫(xiě)法. 當(dāng)屬性跟值長(zhǎng)得一樣時(shí),就可以簡(jiǎn)寫(xiě)
因此這里我們就可以簡(jiǎn)寫(xiě)為

const vm=new Vue({
    el:"#app",
    components: {
        MyComponent
    }
})

所以,為什么推薦使用駝峰寫(xiě)法,這里就應(yīng)該可以看出端倪了, 如果我們定義組件的組件名使用駝峰寫(xiě)法,也就是和需要被注冊(cè)為組件的選項(xiàng)對(duì)象一致是,我們注冊(cè)組件將變得簡(jiǎn)單

如果此時(shí)需要注冊(cè)n個(gè)組件,就可以如下寫(xiě)法

const vm=new Vue({
    el:"#app",
    components: {
        one,two,three,four.....
    }
})

是不是感覺(jué)很優(yōu)雅,

總結(jié):

在定義組件時(shí)推薦使用駝峰寫(xiě)法,最好的組件名和需要被創(chuàng)建為組件的選項(xiàng)對(duì)象名一致
使用組件時(shí)推薦使用連字符

2. 組件中的template 選項(xiàng)

盡管語(yǔ)法糖簡(jiǎn)化了組件注冊(cè)，但在template選項(xiàng)中拼接HTML元素比較麻煩，這也導(dǎo)致了HTML和JavaScript的高耦合性。

Vue.js提供了兩種方式將定義在JavaScript中的HTML模板分離出來(lái)。

2.1 使用script標(biāo)簽將template模板分離出來(lái)

在使用script標(biāo)簽將template模板分離出來(lái)時(shí),要注意script標(biāo)簽的type類(lèi)型選擇,

<div id="app">
    <!-- 3. 使用組件 -->
    <my-component></my-component>
</div>

<!-- 組件模板 -->
<!-- 注意: 如果不添加type屬性,可能會(huì)顯示效果,但是會(huì)報(bào)錯(cuò), -->
<script id="myComponent" type="text/x-template">
    <div>
        <h2>我想被創(chuàng)建為局部組件</h2>
    </div>
</script>


<script>
    // 1. 創(chuàng)建組件選項(xiàng)對(duì)象
    let MyComponent={
        // 此時(shí)的模板template的值就是一個(gè)選擇器
        template: "#myComponent",

    }


    const vm=new Vue({
        el:"#app",
        // 2. 注冊(cè)組件
        components: {
            "my-component": MyComponent
        }

    })


</script>

template選項(xiàng)現(xiàn)在不再是HTML元素，而是一個(gè)id，Vue.js根據(jù)這個(gè)id查找對(duì)應(yīng)的元素，然后將這個(gè)元素內(nèi)的HTML作為模板進(jìn)行編譯。

注意：
使用<script> 標(biāo)簽時(shí)，type指定為text/x-template，意在告訴瀏覽器這不是一段js腳本，瀏覽器在解析HTML文檔時(shí)會(huì)忽略<script>標(biāo)簽內(nèi)定義的內(nèi)容。

2.2 使用template 標(biāo)簽處理模板

如果使用<template>標(biāo)簽，則不需要指定type屬性。

<div id="app">
    <!-- 3. 使用組件 -->
    <my-component></my-component>
</div>

<!-- 組件模板 -->
<!-- template標(biāo)簽不需要指定type,標(biāo)簽的本意就是告訴瀏覽器這是模板 -->
<template id="myComponent">
    <div>
        <h2>我想被創(chuàng)建為局部組件</h2>
    </div>
</template>


<script>
    // 1. 創(chuàng)建組件選項(xiàng)對(duì)象
    let MyComponent={
        // 此時(shí)的模板template的值就是一個(gè)選擇器
        template: "#myComponent",

    }


    const vm=new Vue({
        el:"#app",
        // 2. 注冊(cè)組件
        components: {
            "my-component": MyComponent
        }

    })


</script>

在理解了組件的創(chuàng)建和注冊(cè)過(guò)程后，我建議使用<script>或<template>標(biāo)簽來(lái)定義組件的HTML模板。

這使得HTML代碼和JavaScript代碼是分離的，便于閱讀和維護(hù)。

另外，在Vue.js中，可創(chuàng)建.vue后綴的文件，.vue文件就是一個(gè)組件,成為單文件組件，這個(gè)內(nèi)容我會(huì)在后面的文章介紹。

3. 組件選項(xiàng)對(duì)象中的特例

組件中的選項(xiàng)基本與實(shí)例選項(xiàng)對(duì)象一致, 但是有兩個(gè)選項(xiàng)是特例,分別為el 和 data 屬性

這個(gè)說(shuō)的特例是指組件的選項(xiàng)對(duì)象和實(shí)例選項(xiàng)對(duì)象使用的不同

3.1 在組件中不能使用el

el屬性的作用我們都了解了, 就是在實(shí)例中使用,決定Vue需要接管的DOM元素. 組件是在實(shí)例中使用,所以不需要el屬性,
如果一個(gè)選項(xiàng)對(duì)象被注冊(cè)為組件,添加el屬性就會(huì)造成報(bào)錯(cuò),

// 1. 創(chuàng)建局部組件的選項(xiàng)對(duì)象
let MyComponent={
    el:"",
    template: "#myComponent",

}


const vm=new Vue({
    el:"#app",
    // 2. 將選項(xiàng)對(duì)象注冊(cè)為局部組件
    components: {
        "my-component": MyComponent
    }
})

// 會(huì)報(bào)錯(cuò), 告訴你el屬性只能在實(shí)例中使用

可以通過(guò)報(bào)錯(cuò)信息了解到, el選項(xiàng)只能使用在new創(chuàng)建的vue實(shí)例上

3.2 組件中data屬性值必須是一個(gè)函數(shù),

組件中的data選項(xiàng)必須是一個(gè)函數(shù),返回一個(gè)數(shù)據(jù)對(duì)象.

為什么需要是一個(gè)函數(shù),而不可以像Vue實(shí)例的選項(xiàng)對(duì)象一樣是一個(gè)對(duì)象呢

3.2.1 組件data屬性值如果是一個(gè)對(duì)象的問(wèn)題

不能使用對(duì)象的原因:

首先因?yàn)榻M件會(huì)被多次復(fù)用,
而對(duì)象是引用數(shù)據(jù)類(lèi)型,如果組件數(shù)據(jù)使用對(duì)象的話(huà),那么組件所有的復(fù)用都共享這些數(shù)據(jù),

這樣就會(huì)出現(xiàn)問(wèn)題,看代碼:

示例代碼如下:

<div id="app">
    <!-- 3. 使用組件 -->
    <my-component></my-component>
    <my-component></my-component>
    <my-component></my-component>
</div>

<template id="myComponent">
    <div>
        <h2>組件{{num}}</h2>
        <button @click="handleClick">點(diǎn)擊+1</button>
    </div>
</template>


<script>
    // 組件共享數(shù)據(jù)
    let data={
        num : 10
    }

    // 1. 選項(xiàng)對(duì)象
    let MyComponent={
        template: "#myComponent",
        data: function(){
            return data
        },
        methods: {
            handleClick(){
                this.num++
            }
        }
    }

    const vm=new Vue({
        el:"#app",
        // 2. 注冊(cè)組件
        components: {
            "my-component": MyComponent
        }

    })
</script>

示例結(jié)果:

實(shí)例說(shuō)明:

如果在組件的data中直接寫(xiě)對(duì)象就會(huì)報(bào)錯(cuò),
因此我們將data函數(shù)中返回的對(duì)象提取出來(lái).這樣所有的組件都共用一個(gè)數(shù)據(jù)對(duì)象.
一次來(lái)模擬組件data選項(xiàng)值為對(duì)象的情景

通過(guò)案例我們就會(huì)發(fā)現(xiàn)如果所有的組件都共享數(shù)據(jù),當(dāng)有一個(gè)組件中的數(shù)據(jù)發(fā)生了變化,所有的組件顯示的數(shù)據(jù)都會(huì)發(fā)生變化, 這不是我們想要的,

3.2.2 解決組件共享數(shù)據(jù)的問(wèn)題

所以組件的data數(shù)據(jù)屬性才會(huì)需要函數(shù),每次初始化化的時(shí)候都會(huì)執(zhí)行函數(shù),將返回的結(jié)果作為組件的數(shù)據(jù),
這樣每次執(zhí)行函數(shù)都會(huì)給每個(gè)組件創(chuàng)建一個(gè)獨(dú)立的數(shù)據(jù)

<div id="app">
    <!-- 3. 使用組件 -->
    <my-component></my-component>
    <my-component></my-component>
    <my-component></my-component>
</div>

<template id="myComponent">
    <div>
        <h2>組件{{num}}</h2>
        <button @click="handleClick">點(diǎn)擊+1</button>
    </div>
</template>


<script>
 
    // 1. 選項(xiàng)對(duì)象
    let MyComponent={
        template: "#myComponent",
        data: function(){
            // 每次函數(shù)執(zhí)行都會(huì)返回新的數(shù)據(jù),非共享數(shù)據(jù)
            return {
                num : 10
            }
        },
        methods: {
            handleClick(){
                this.num++
            }
        }
    }


    const vm=new Vue({
        el:"#app",
        // 2. 注冊(cè)組件
        components: {
            "my-component": MyComponent
        }

    })


</script>

顯示結(jié)果:

通過(guò)示例就會(huì)發(fā)現(xiàn), 當(dāng)一個(gè)組件數(shù)據(jù)發(fā)生改變的時(shí)候, 其他組件的數(shù)據(jù)不會(huì)變化,因?yàn)槊總€(gè)組件都有自己獨(dú)立的數(shù)據(jù)

3.3 組件的命名

當(dāng)注冊(cè)組件 (或者 prop) 時(shí)，可以使用 kebab-case (短橫線(xiàn)分隔命名)、camelCase (駝峰式命名) 或 PascalCase (單詞首字母大寫(xiě)命名)。

// 在組件定義中
components: {
  // 使用 kebab-case 注冊(cè)
  'kebab-cased-component': { /* ... */ },
  // 使用 camelCase 注冊(cè) 俗稱(chēng)小駝峰
  'camelCasedComponent': { /* ... */ },
  // 使用 PascalCase 注冊(cè) 俗稱(chēng)大駝峰
  'PascalCasedComponent': { /* ... */ }
}

在 HTML 模板中，請(qǐng)使用 kebab-case：

<!-- 在 HTML 模板中始終使用 kebab-case -->
<kebab-cased-component></kebab-cased-component>
<camel-cased-component></camel-cased-component>
<pascal-cased-component></pascal-cased-component>

這個(gè)問(wèn)題已經(jīng)在前面認(rèn)真探討過(guò)了,這里不再詳細(xì)闡述

4. 組件使用問(wèn)題

通過(guò)上面上的例子我們已經(jīng)了解了組件的使用,就是把組件名當(dāng)做自定義標(biāo)簽使用,但是這種使用方法有的時(shí)候也會(huì)出現(xiàn)問(wèn)題,

4.1. 組件標(biāo)簽解析錯(cuò)誤

通過(guò)下面的實(shí)例了解組件標(biāo)簽解析是發(fā)生的問(wèn)題.

例如:實(shí)例代碼如下

<div id="app">
    <!-- 3. 使用組件 -->
    <table>
        <tbody>
            <row></row>
            <row></row>
            <row></row>
        </tbody>
    </table>
</div>


<!-- 組件模板 -->
<template id="myComponent">
    <tr>
        <td>內(nèi)容</td>
        <td>123</td>
    </tr>
</template>


<script>


    // 1. 組件選項(xiàng)對(duì)象
    let MyComponent={
        template: "#myComponent",
    }

     // 2. 注冊(cè)組件
    const vm=new Vue({
        el:"#app",
        components: {
            "row": MyComponent
        }

    })

</script>

顯示結(jié)果:

實(shí)例中的寫(xiě)法,在查看代碼結(jié)構(gòu)時(shí),發(fā)現(xiàn)子組件的tr標(biāo)簽并不在tbody里,

原因在與瀏覽器規(guī)范中tbody標(biāo)簽里面必須放tr標(biāo)簽,但是我們放的是row自定義標(biāo)簽,所以在解析的時(shí)候就會(huì)出問(wèn)題

諸如此類(lèi)的還有ul,ol標(biāo)簽里只能放li標(biāo)簽, select標(biāo)簽中只能放option,這些都是需要注意的事項(xiàng)

那么我們?cè)趺唇鉀Q這類(lèi)問(wèn)題呢?

4.2 通過(guò)is屬性使用組件

vue允許我們使用is屬性來(lái)使用組件, is屬性的值是組件名

所以可以采用is屬性來(lái)制定組件

示例代碼如下:

<div id="app">
     <!-- 3. 使用組件 -->
    <table>
        <tbody>
            <tr is="row"></tr>
            <tr is="row"/>
            <tr is="row"/>
        </tbody>
    </table>
</div>

顯示結(jié)果:

此時(shí)我們就會(huì)發(fā)現(xiàn)不僅結(jié)果沒(méi)問(wèn)題, 編譯后標(biāo)簽的嵌套也沒(méi)有什么問(wèn)題,

因?yàn)槲覀兪前凑諛?biāo)準(zhǔn)在tbody標(biāo)簽中使用的是tr標(biāo)簽,只不過(guò)通過(guò)is屬性將tr標(biāo)簽替換為了組件row的模板標(biāo)簽.

此時(shí)tr標(biāo)簽中沒(méi)有嵌套內(nèi)容,所有使用單標(biāo)簽,雙標(biāo)簽都可以

在線(xiàn)咨詢(xún)

上一篇：前端js初學(xué)者提升前端技能，必須要練的15個(gè)項(xiàng)目推薦
下一篇：HTML網(wǎng)頁(yè)中的圖形是如何對(duì)齊的？有什么方法可以使它

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

vue組件的模板分離寫(xiě)法

. Vue組件名推薦使用駝峰命名

2. 組件中的template 選項(xiàng)

2.1 使用script標(biāo)簽將template模板分離出來(lái)

2.2 使用template 標(biāo)簽處理模板

3. 組件選項(xiàng)對(duì)象中的特例

3.1 在組件中不能使用el

3.2 組件中data屬性值必須是一個(gè)函數(shù),

3.2.1 組件data屬性值如果是一個(gè)對(duì)象的問(wèn)題

3.2.2 解決組件共享數(shù)據(jù)的問(wèn)題

3.3 組件的命名

4. 組件使用問(wèn)題

4.1. 組件標(biāo)簽解析錯(cuò)誤

4.2 通過(guò)is屬性使用組件

您的項(xiàng)目需求