Vue元件元件的屬性

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

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

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

如上**

foo是元件內部定義的乙個prop屬性，baz是父元件的乙個data屬性，

event-a是子元件定義的乙個事件，dothis是父元件的乙個方法

過程就是這樣：

父元件把baz資料通過prop傳遞給子元件的foo；

子元件內部得到foo的值，就可以進行相應的操作；

當子元件內部發生了一些變化，希望父元件能知道時，就利用**觸發event-a事件，把一些資料傳送出去

父元件把這個事件處理器繫結為dothis方法，子元件傳送的資料，就作為dothis方法的引數被傳進來

然後父元件就可以根據這些資料，進行相應的操作

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

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

然後呼叫該元件

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

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

比如：

hello

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

而這樣

hello

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

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

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

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

1.當父元件傳遞的屬性是引用型別時，在子元件中更改相應的屬性會導致父元件相應屬性的更改

2.當父元件傳遞值為基本型別時，在子元件中更改這個屬性會報錯。正確的做法是，在父元件中繫結屬性值時，加上.sync修飾符。

然後在子元件中改變相應的屬性

methods: 
}

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

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

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

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

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

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

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

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

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

string

number

boolean

function

object

array

symbol

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

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

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

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

上面渲染的結果是，div的att屬性是helloparent。

注意：前面已經提到過，覆蓋原則對於class和style不適用,而是採用了合併(merge)的原則。

上面的渲染結果是，div的類名是class1 class2，行內樣式是color:red; background:yellow;。

Vue元件元件的屬性

vue呼叫元件的屬性 Vue 元件例項屬性的使用

vue元件name屬性

Vue元件prop屬性

Vue元件 元件的屬性

vue呼叫元件的屬性 Vue 元件例項屬性的使用

vue元件name屬性

Vue元件prop屬性

相關推薦

Vue元件元件的屬性