vue元件 Prop傳遞資料

2022-05-25 05:45:13 字數 949 閱讀 8402

元件例項的作用域是孤立的。這意味著不能(也不應該)在子元件的模板內直接引用父元件的資料。要讓子元件使用父元件的資料,我們需要通過子元件的props選項。

prop 是單向繫結的:當父元件的屬性變化時,將傳導給子元件,但是不會反過來。這是為了防止子元件無意修改了父元件的狀態。

每次父元件更新時,子元件的所有 prop 都會更新為最新值。這意味著你不應該在子元件內部改變 prop。

1.prop靜態傳遞資料

vue.component('my-component',

},//用計算屬性選項對資料進行處理

computed:

},template:'' +

'}'+

'}'+

'} }今年}了

輸出結果:

2.prop動態傳遞資料

vue.component('my-component',

},computed:

},template:'' +

'}---}

'+'}'+''

})輸出結果:

3、prop驗證,我們可以為元件的 props 指定驗證規格。如果傳入的資料不符合規格,vue 會發出警告。在前台的控制器中可以看到警告資訊。

vue.component('example', ,

// 數字,有預設值

propd: ,

// 陣列/物件的預設值應當由乙個工廠函式返回

prope: }},

// 自定義驗證函式

propf: }},

template:'}'

})控制台輸出的警告資訊:

vue父元件向子元件傳遞資料prop

今天學習vue學到使用prop父向子傳遞資料,學了半天也沒懂什麼意思,沒學懂 記住不 true 查了下別人的學習經驗發現基本上都是拷貝vue官網的介紹,哎,不要臉的真多,能咋辦 繼續研究唄 他說是父元件向子元件傳遞繫結的資料 子元件接收父元件資料,那就逆向推理一下 text align center...

vue 通過Prop向子元件傳遞資料

template div id users users users users div template script import users from components users export default components script 解釋 把父元件中的data中的users 通...

Vue元件prop屬性

vue.component blog post post title hello 所有的 prop 都使得其父子 prop 之間形成了乙個單向下行繫結 父級 prop 的更新會向下流動到子元件中,但是反過來則不行。每次父級元件發生更新時,子元件中所有的 prop 都將會重新整理為最新的值。這意味著你...