vue元件傳值

2021-10-05 19:54:08 字數 1011 閱讀 1365

(通過屬性繫結v-bind)

在引用子元件時,把需要傳遞給子元件的資料,以屬性繫結形式,傳遞到子元件內部,供子元件使用

子元件預設無法訪問到父元件中的data上資料和methods中方法

在呼叫子元件時,如果子元件用到父裡的值,在呼叫時繫結乙個屬性(屬性名隨意取,屬性值是要用的父裡data中的資料),屬性名在子元件裡props陣列中定義後,才可以使用

子元件中data裡資料和props裡資料區別

子元件中data資料是子元件自身私有的資料,可讀可寫

props裡資料都是通過父傳給子的,唯讀,無法重新賦值

html裡

vm例項裡

var vm = new vue(,

components:

},template: '',

props: ['father']}}

})

(通過事件繫結v-on)

呼叫子元件時繫結乙個事件函式(函式名隨意取,函式值是要用的父的methods的函式名)子template裡繫結子的方法,子方法裡要有this.$emit(呼叫子元件時繫結的事件函式名,要傳的引數)

vm例項(父)

var vm = new vue(,

methods:

},components:

})

定義的子元件

var com = 

},methods:

},}

呼叫的子元件

獲取dom元素和元件引用

在想要獲取的dom元素身上加上ref屬性,名字隨意取(ref=」myh1」),在vm例項方法中獲取元素this.$refs.自己起的名字(this.$refs.myh1)

可以在呼叫子元件時加上ref屬性,在vm例項中獲取子元件中的data定義的資料和方法

Vue元件傳值 父子元件傳值

父元件可以引入 使用子元件,從業務上看,該父元件有可能對子元件有個性化需求,為了體現元件的靈活多變,可以通過傳值實現。應用情景 語法 父元件要在子元件標籤上通過屬性值方式傳值 子元件標籤 name value name value name value 子元件標籤 子元件接收並應用值,具體通過pro...

vue 元件傳值 父子元件傳值,兄弟元件傳值

父向子 v bind props 子元件 子元件 props msg props接收 props 驗證 props food接受數值型別的引數,如果不傳入的話預設就是100 food fooe接受物件型別的引數 fooe foof使用乙個自定義的驗證器 foof foog props 是單向繫結的 ...

Vue元件傳值

學習vue的傳值心得,剛入門vue,大佬勿噴,請多多指教。1.父元件傳值子元件 父元件巢狀子元件式,在標籤裡繫結 子元件用props屬性接收 例 父元件傳值,為縮寫,等同於v bind obj item props obj count 子元件接收傳值,可直接使用,但是推薦在下方重新賦值給新變數再使用...