vue的props屬性,vue的插槽

2022-09-11 12:42:17 字數 981 閱讀 4536

vue元件的props屬性:

當我們用到vue的父子傳值的時候(父傳子),就可以用props屬性來完成,

我們在子元件中定義乙個props屬性,然後只需要在呼叫這個元件時給這個屬性賦值便能傳給子元件

首先我們在元件scroller的props中定義兩個屬性,

handletoscroll,

handletotouchend,

並設定型別為function,同時給乙個預設值

然後在父元件中定義兩個方法

然後通過動態繫結將handletoscroll2,handletotouchend2傳給了子元件中的handletoscroll,handletotouchend。

vue插槽:

插槽就是子元件中的提供給父元件使用的乙個佔位符,用 表示,父元件可以在這個佔位符中填充任何模板**,如 html、元件等,填充的內容會替換子元件的標籤。

注意:如果子元件沒有使用插槽,父元件如果需要往子元件中填充模板或者html, 是沒法做到的!!!!

上面這個是子元件,

下面這個是父元件,父元件中的子元件中的ul標籤會替換子元件的標籤,這就是插槽的基本用法。

vue中的props物件

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

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

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

Vue 元件 驗證props

本節需要基礎 vue 元件通訊 父傳子 props props主要作用是讓父元件傳值給子元件。普通的傳值方式做上面的鏈結有講到。props 引數名 普通傳值,可以把要傳的值放在乙個陣列裡,也可以放在乙個物件裡。props 引數1 引數2 引數n props 比如 props 也可以定義多種型別,只需...