Vue學習 元件中的資料通訊

2022-01-11 21:53:35 字數 1817 閱讀 9521

目錄元件中的雙向繫結

父元件訪問子元件($children或$refs)

子元件訪問父元件($parent)

元件的擴充套件-slot

其它訊息內容:}

data:,

components:

}})

const cpnc = vue.extend(

}})

const cpnc = vue.extend(

},methods:,

decrement:function()

}})

使用場景

如何通訊(傳遞資料)

父傳子建立元件

const cpnc = vue.extend()

//2.註冊元件

vue.component('my-cpn', cpnc)

data:

})2.第二種是傳乙個物件型別,可以進行型別限制type和預設值default,是否必需reauired

type-指定引數的型別,有:string,array,boolean,number,date,function,symbol

default-指定預設值

reauired-指定是否必須要傳該引數,是boolean型別,傳(true或false)

const cpnc = vue.extend(,

cmessage:

}})

vue.component('cnp',,

//4.帶有預設值的數字

propd:,

//5.預設值的物件,陣列或物件的需要返回乙個函式

prope:}},

//6.帶自定義驗證函式

propf:}}

})

建立元件

const cpnc = vue.extend(

}})//2.註冊元件

vue.component('my-cpn', cpnc)

data:

})

子傳父

建立元件

const cpnc = vue.extend(,,,

]}

},methods:

}}) components: ,

data: ,

methods:

}})

建立元件

const cpnc = vue.extend(

},props:

},methods:

}}) components:,

data:

})

點選methods:,

},components:}}

}})

點選methods:,

},components:}}

}})

data: ,

components: }}

}})基本使用

我是slot

我是slot按鈕

我是slot span

data: ,

components:

}})具名插槽

center

right

right

data: ,

components: }})

vue 元件資料通訊

父元件傳給子元件props父元件設定props值 text 元件內部資料傳遞 注意 傳遞固定內容say 固定內容 傳遞data裡面的變數 say text 傳boolean值和物件 componen title false duixiang 子元件接收propsprops componentitle...

Vue元件之間的資料通訊

最近在用vue做專案,學習了不少東西,但是有時候光顧著做專案卻忘記要找個時間來整理一下最近的一些學習新得,因為是新手,所以可能會有錯誤的地方,歡迎指出和交流呀 關於父子元件以及非父子元件之間的資料通訊 元件之間資料通訊.png 1 父子元件之間資料通訊 一般父元件向子元件傳遞資料用prop進行傳遞,...

vue元件之間的資料通訊小例子

html html lang en head meta charset utf 8 title 元件之間的通訊 title head body script src js vue.js script div id son message msg son div script 編寫和註冊子元件 vue...