元件祖孫傳值 Vue 元件間傳參最佳實踐

2021-10-13 04:57:04 字數 1770 閱讀 1851

1.父子元件間的資料傳遞

1.1從父元件獲取子元件的資料

1.1.1通過繫結 props 將父元件的資料關聯到子元件,並修飾 .sync 或者用 v-model 同步來自子元件的資料變化

//使用.sync :

//父元件

toggle

import mydialog from '@/components/mydialog.vue'

export default },所以是顯示的關閉

export default }x

export default }

import mydialog from '@/components/mydialog.vue'

export default }

子元件的$attrs: }

import other from '@/components/other.vue'

export default }

孫子:}

export default }

} import mydialog from '@/components/mydialog.vue'

export default

//子元件:

sayhello

import other from '@/components/other.vue'

export default {

components: {

other

data() {

return {

title: 'vue.js',

show: false,

text:''

created() {

mounted() {

const comb = this.$refs.comb;

this.text = comb.text

methods: {

sayhello() {

this.show = true

// window.alert('hello');

//孫子元件:

export default {

name: 'demo',

data(){

return{

text:'c'

created() {

3.1.2 可以在模板上給孫元件繫結 listener 獲取孫元件傳過來的資料

3.1.3 可以在模板上給孫元件繫結 v-model 或者 .sync 同步孫元件的資料

3.2孫元件不在祖先元件的 template 內,要從祖先元件獲取孫元件的資料

3.2.1先在子元件上繫結 v-model 或者 .sync,接著再在子元件的模板上通過 v-model 或者 .sync 繫結孫元件,以同步孫元件的資料

3.2.2現在孫元件上繫結 listener,再給子元件繫結 listener,資料由事件層層上傳給祖先元件

3.3孫元件在祖先元件的 template 內,要從孫元件獲取祖先元件的資料

3.3.1直接在祖先元件的 template 中通過 v-bind 將資料傳遞到孫元件中,孫元件通過 props 或者 $attrs 進行接收

3.4孫元件不在祖先元件的 template 內,要從孫元件獲取祖先元件的資料

3.4.1先在子元件上 v-bind 繫結資料,接著再在子元件上通過 v-bind 繫結孫元件,資料層層向下傳遞

3.4.2孫元件在 eventbus 中註冊事件,監聽來自祖先元件觸發的事件資料

3.4.3祖先元件將資料掛到 vuex 中,再由孫元件從 vuex 中去獲取資料

元件祖孫傳值 react元件間的傳值

在react中元件件的傳值,可以是父子之間的傳值,也可以是非父子之間 兄弟之間 的傳值。父子間的傳值 1 父傳子 子元件如果是類元件,通過this.props獲取父元件傳遞過來的值 子元件如果是無狀態元件,則通過props獲取父元件傳遞過來的值。2 子傳父 主要是呼叫父元件傳過來的方法,把實參傳遞到...

VUE元件間傳參

元件間共三種傳參路徑 父 子 子 父 兄弟之間 注意 框架中運算元組不能用下標,只能用陣列api 1 父 子 父元件用 子元件接收的變數名 父元件的變數名 向子元件傳送變數,子元件在 todo add.vue todo list.vue todo item.vue x main.js同級的bus.j...

Vue元件間傳值

在父元件中給子元件傳值 父元件操作 1.import watermark from components watermark 引入子元件2.componenta為元件的名稱 import中的名稱 a為組建中暴露的資料名 b為data中或者computed中的欄位名稱 3.子元件中在props中寫a的...