props寫法 簡單理解vue中Props屬性

2021-10-16 20:47:11 字數 840 閱讀 6671

使用 props 傳遞資料

元件例項的作用域是孤立的。這意味著不能並且不應該在子元件的模板內直接引用父元件的資料。可以使用 props 把資料傳給子元件。

「prop」 是元件資料的乙個字段,期望從父元件傳下來。子元件需要顯式地用 props 選項 宣告 props:

vue.component(『child』, }』

然後向它傳入乙個普通字串:

舉例錯誤寫法:

html>

vue.js

//使用 props 傳輸資料予子元件

//props , data 重複名稱會出現錯誤

vue.config.debug = true;

vue.component(『child』, }}}』,

data: function() }}}』

var vm = new vue(}}}』,

/*data: function() }}}』,

/*data: function() }}}123』,

/*data: function() }123}}123』,

/*data: function() {

return {

msg: 』boy』

var vm = new vue({

結果:hello! 123 123hello1! 123hello2!

結論:在props 中傳入多個資料是,如果在父元件的模板類新增其他元素或者字元會有:

1-在最前面加入—每個子元件渲染出來都會在其前面加上

2-在最後面加入—每個子元件渲染出來都會在其後面加上

3-在中間加入—他前面子元件後面加上,後面的子元件後面加上

props寫法 Vue中props的用法知識點

vue中props的詳解 看一下官方文件 元件例項的作用域是孤立的。這意味著不能 也不應該 在子元件的模板內直接引用父元件的資料。父元件的資料需要通過 prop 才能下發到子元件中。也就是props是子元件訪問父元件資料的唯一介面。詳細一點解釋就是 乙個元件可以直接在模板裡面渲染data裡面的資料 ...

vue子元件props寫法

prop vue.js文件 camelcase 駝峰命名法 的 prop 名需要使用其等價的 kebab case 短橫線分隔命名 命名 props title likes ispublished commentids author props 帶有預設值的數字 propd 帶有預設值的物件 pro...

vue中的props物件

1.props物件的定義 props其實是properties的縮寫,props物件是用來定義屬性的。props物件可以接受陣列形式的引數又或者是物件形式的引數。陣列形式 props title likes ispublished commentids author 物件形式 在物件形式中,可以指定...