如何理解Vue中的元件

vue2.6已經更新了關於內容插槽和作用域插槽的api和用法，為了不誤導大家，我把插槽的內容刪除了。詳情請看官網

2018-07-19更新:

更新作用域插槽的屬性:scope->slot-scope;

新增了物件解構。

今天看了下vue官網上關於元件的教程，感覺內容還挺多，現在把元件中基本的知識梳理一下。

註冊元件就是利用vue.component()方法，先傳入乙個自定義元件的名字，然後傳入這個元件的配置。

vue.component('mycomponent',}})

如上方式，就已經建立了乙個自定義元件，然後就可以在vue例項掛在的dom元素中使用它。

mycomponent>

my-component>

div>

data: ,

components: }})

直接使用vue.component()建立的元件，所有的vue例項都可以使用。還可以在某個vue例項中註冊只有自己能使用的元件。

data: ,

components: }})

注意：元件的模板只能有乙個根元素。下面的情況是不允許的。

template: `這是乙個區域性的自定義元件，只能在當前vue例項中使用 hello`,

可以看出，註冊元件時傳入的配置和建立vue例項差不多，但也有不同，其中乙個就是data屬性必須是乙個函式。

這是因為如果像vue例項那樣，傳入乙個物件，由於js中物件型別的變數實際上儲存的是物件的引用，所以當存在多個這樣的元件時，會共享資料，導致乙個元件中資料的改變會引起其他元件資料的改變。

而使用乙個返回物件的函式，每次使用元件都會建立乙個新的物件，這樣就不會出現共享資料的問題來了。

當使用 dom 作為模版時 (例如，將 el 選項掛載到乙個已存在的元素上), 你會受到 html 的一些限制，因為 vue 只有在瀏覽器解析和標準化 html 後才能獲取模板內容。尤其像這些元素其中，前兩個模板都不是vue官方推薦的，所以一般情況下，只有單檔案元件.vue可以忽略這種情況。

在html中使用元素，會有一些屬性，如class,id，還可以繫結事件，自定義元件也是可以的。當在乙個元件中，使用了其他自定義元件時，就會利用子元件的屬性和事件來和父元件進行資料交流。

如上如所示，父子元件之間的通訊就是 props down,events up，父元件通過屬性props向下傳遞資料給子元件，子元件通過事件events 給父元件傳送訊息。

比如，子元件需要某個資料，就在內部定義乙個prop屬性，然後父元件就像給html元素指定特性值一樣，把自己的data屬性傳遞給子元件的這個屬性。

而當子元件內部發生了什麼事情的時候，就通過自定義事件來把這個事情涉及到的資料暴露出來，供父元件處理。

"baz" v-on:event-a="dothis(arg1,...arg2)">my-component>

如上**，

過程就是這樣：

vue元件通過props屬性來宣告乙個自己的屬性，然後父元件就可以往裡面傳遞資料。

vue.component('mycomponent',}
', props: ['mymessage'],
data () }})

然後呼叫該元件

mycomponent>

div>

注意，由於html特性是不區分大小寫的，所以傳遞屬性值時，mymessage應該轉換成 kebab-case (短橫線隔開式)my-message="hello"。

這裡說一下v-bind繫結屬性值的乙個特性：一般情況下，使用v-bind給元素特性(attribute)傳遞值時，vue會將""中的內容當做乙個表示式。

比如：

hellodiv>

上面這樣，div元素的attr特性值就是message。

而這樣"message">hello

這裡的message應該是vue例項的data的乙個屬性，這樣div元素的attr特性值就是message這個屬性的值。

之所以說是一般情況，是因為class和style特性並不是這樣。用v-bind:class和class傳入正常的類名，效果是一樣的，因為對於這兩個特性，vue採用了合併而不是替換的原則。

根據上面，想要把父元件的屬性繫結到子元件，應該使用v-bind，這樣，父元件中資料改變時能反映到子元件。

注意，根據父元件傳遞給子元件的屬性型別的不同，當在子元件中更改這個屬性時，會有以下兩種情況：

一般來說，是不建議在子元件中對父元件中傳遞來的屬性進行操作的。如果真的有這種需求,可以這樣:

父元件傳遞了乙個基本型別值，那麼可以在子元件中建立乙個新的屬性，並以傳遞進來的值進行初始化，之後就可以操作這個新的屬性了

props: ['initialcounter'],
data: function () 
}

父元件傳遞了乙個引用型別值，為了避免更改父元件中相應的資料，最好是對引用型別進行複製。複雜的情況，肯定應該是深複製。

同樣是上面的原因，靜態的給子元件的特性傳遞值，它都會把他當做乙個字串。

comp>

子元件中，特性的值是字串 "1" 而不是 number 1。如果想傳遞正確的數值，應該使用v-bind傳遞，這樣就能把傳遞的值當做乙個表示式來處理，而不是字串。

comp>

我們可以給元件的props屬性新增驗證，當傳入的資料不符合要求時，vue會發出警告。

vue.component('example', ,
// 數字，有預設值
propd: ,
// 陣列/物件的預設值應當由乙個工廠函式返回
prope: }},
// 自定義驗證函式
propf: 
}}})

type可以是下面原生構造器：

type也可以是乙個自定義構造器函式，使用instanceof檢測。

// 自定義person構造器
function person(name, age) 
vue.component('my-component', }， 年齡： } 
`, props: }})
new vue(
})

也可以像在html標籤中新增data-開頭的自定義屬性一樣，給自定義元件新增任意的屬性。而不僅限於data-*形式，這樣做的話，vue會把這個屬性放在自定義元件的根元素上。乙個自定義元件的模板只能有乙個根元素。

如果父元件向子元件的非prop屬性傳遞了值，那麼這個值會覆蓋子元件模板中的特性。

my-component2>

div>

也可以直接繫結到元件物件上：

var home = 
new vue(
})

如果把切換出去的元件保留在記憶體中，可以保留它的狀態或避免重新渲染。為此可以新增乙個keep-alive指令引數：


component>
keep-alive>

如何理解Vue中的元件

Vue元件的理解

Vue元件理解

深刻理解Vue中的元件

如何理解Vue中的元件

Vue元件的理解

Vue元件理解

深刻理解Vue中的元件

相關推薦