VUE元件化 元件之間的傳值(父傳子,子傳父等)

2021-10-06 11:12:11 字數 640 閱讀 5130

1.父傳子

//child

props:

//parent

//msg可以為變數 :msg='***'

//parent

this.$refs.name.xx='xx'

//parent

this.$children[0].xx='***' //注:子元素不保證順序,也不是響應式,xx表示值,是響應式

2.子傳父

//child

this.$emit('add',good)

//parent

3.兄弟元件

//brother1

this.$parent.$on('foo',handle)

//brother2

this.$parent.$emit('foo')

4.祖先輩和後代

//ancestor

provide()

}//descendant

inject:['foo']

5.任意兩個元件之間:事件匯流排或vuex

Vue元件傳值之 子傳父

原理 父元件將方法的引用,傳遞到子元件內部,子元件在內部呼叫父元件傳遞過來的方法,同時把要傳送給父元件的資料,在呼叫方法的時候當作引數傳遞進去 父元件將方法的引用傳遞給子元件,其中,getmsg是父元件中methods中定義的方法名稱,func是子元件呼叫傳遞過來方法時候的方法名稱 doctype ...

vue變數傳值 vue元件與元件之間傳值

如上圖所示,2是1的子元件,1是3的父元件,2和3是兄弟元件 html 子元件註冊 vue.component list group 父元件 new vue 綜上所述,父元件向子元件傳值需要三步 1 首先在父元件中建立資料 2 然後再html 中用 繫結資料 3 最後在子元件註冊的 中用props接...

Vue 元件之間傳值

一 父元件向子元件傳遞資料 在 vue 中,可以使用 props 向子元件傳遞資料。子元件部分 這是 header.vue 的 html 部分,logo 是在 data 中定義的變數。如果需要從父元件獲取 logo 的值,就需要使用props logo 在 props 中新增了元素之後,就不需要在 ...