vue父子傳參

1、父子傳參

?父組件向子組件傳值

父向子

父組件上邊,在要接受數(shù)據(jù)的組件上通過動態(tài)屬性傳遞

:data="data"

子組件通過props屬性接受

1.數(shù)組


? ? props:['title','count','imgs','styles'],


2.對象

? ? 屬性名類型 Object | Array | String | Numeber | Boolean | Function


? ? props:{

? ? ? ? title:Array,

? ? }


? ? props:{

? ? ? ? 屬性名:{

? ? ? ? ? ? type:類型,

? ? ? ? ? ? required:必填項,默認(rèn)值為false,

? ? ? ? ? ? defalult:默認(rèn)值,(如果是簡單值的話,直接設(shè)置,如果是數(shù)組或者對象的話,需要一個函數(shù)),

? ? ? ? ? ? validator(val){

? ? ? ? ? ? 自定義格式的驗證,函數(shù)return 成立

? ? ? ? ? ? }

? ? ? ? }

? ? }



? ? vue 是單向數(shù)據(jù)流,不能在子組件里面直接修改父組件傳遞過來的值



? ?子向父


? ? ? ? 子組件里邊使用$emit


? ? $emit('事件名稱','實參1','實參2')


? ? <button @click="$emit('addCount',count)"></button>


? ? @事件名稱 = "事件處理程序"


? ? 父組件接受的方法

? ? ? ? @addCount = "方法名"

? ? ? ? 在methods方法里面寫函數(shù)

? ? ? ? addCount(){

? ? ? ? ? ? console.log(1);

? ? ? ? }



? ? ? 非父子

? ? ? ? ? ? 3通過創(chuàng)建一個空對象


? ? ? ? ? ? 在 main.js 里面Vue.prototype.$bus=new Vue();

? ? ? ? ? ? 所有的組件都是通過vueComponent 實例出來的 vueComponent繼承vue


? ? ? ? ? ? 子組件


? ? ? ? ? ? ? 傳參的方式:? this.$bus.$emit('add',item)


? ? ? ? ? ? ? ? 在created方法里面接受

? ? ? ? ? ? ? ? this.$bus.$on('add',(obj)=>{

? ? ? ? ? ? ? ? ? ? console.log(obj)//傳過來的參數(shù)值

? ? ? ? ? ? ? ? })

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 父傳子數(shù)據(jù),子修改數(shù)據(jù),父不改 場景: 列表(父組件)點擊,彈出表單并傳遞當(dāng)前行數(shù)據(jù)到表單(子組件),表單使用雙向...
    追卓2018閱讀 962評論 0 0
  • 組件(Component)是Vue.js最核心的功能,也是整個架構(gòu)設(shè)計最精彩的地方,當(dāng)然也是最難掌握的。...
    六個周閱讀 5,775評論 0 32
  • VUE介紹 Vue的特點構(gòu)建用戶界面,只關(guān)注View層簡單易學(xué),簡潔、輕量、快速漸進(jìn)式框架 框架VS庫庫,是一封裝...
    多多醬_DuoDuo_閱讀 2,859評論 1 17
  • 十月下,天越發(fā)的冷了。 許多年前,是有寫日記的習(xí)慣的,也并沒有記錄每天的一些瑣事,倒是寫了不少無關(guān)痛癢的東西。性格...
    青只閱讀 408評論 0 2
  • 一 沒想到有一天會遇到 你就在我旁邊 我卻離你很遠(yuǎn) 二 春風(fēng)落寞 離人蕭索 再不見君顏色 ...
    倪拗拗閱讀 497評論 1 10

友情鏈接更多精彩內(nèi)容