使用 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 物件形式 在物件形式中,可以指定...