Vue資料 父傳子 子傳父 子傳子

父傳子

父元件

<

template
>
<
div>
<
son 
:fatherage
="age"
@fathermethod
="log"
>
son>
div>
template
>
<
script
>
import son from 
'./son.vue
'export 
default
},methods: 
},components: 
}script
>

子元件

<

template
>
<
div>
<
p>}
p>
<
button 
@click
="usefathermethod"
>click
button
>
div>
template
>
<
script
>
export 
default
, methods: 
},}script
>

也可以通過this.$parent.event來呼叫父元件方法

子傳父

子元件利用父元件方法，將引數傳遞

父元件

<

template
>
<
div>
<
p>father: }
p>
<
son 
@fathermethod
="changeage"
>
son>
div>
template
>
<
script
>
import son from 
'./son.vue
'export 
default
},methods: 
},components: 
}script
>

子元件

<

template
>
<
div>
<
p>sonage: }
p>
<
button 
@click
="usefathermethod"
>click
button
>
div>
template
>
<
script
>
export 
default
},methods: 
},}script
>

當和自定義元件和element-ui的元件巢狀使用時不生效，例如el-tags，因為巢狀使用兩者就不是父子元件的關係

另外一種思路是通過v-slot作用域插槽獲得子元件資料，然後通過觸發事件獲取

子傳子

原理：通過eventbus將資料傳遞

bus.js

import vue from 'vue'export 

default
new vue({})

元件1

<

template
>
<
div>
<
p>son1age: }
p>
<
button 
@click
="senddata"
>click
button
>
div>
template
>
<
script
>
//引入bus檔案
import bus from 
'./bus
'export 
default
},methods: 
},}script
>

元件2

<

template
>
<
div>
<
p>son2age: }
p>
div>
template
>
<
script
>
//引入bus檔案
import bus from 
'./bus
'export 
default
},mounted() )
}}script
>

如果不想增加bus.js這個檔案，可以在main.js裡new乙個vue物件並掛載到vue原型鏈上

import vue from 'vue'

vue.prototype.$bus = new vue()
// 以後可以在子元件中直接使用this.$bus.$on註冊和this.$bus.$emit呼叫

vue 父傳子，子傳父

父元件向子元件傳值 父 子元件新增行內便簽v bind message orderlistname 之定義傳引數orderlistname 13 子 接受傳值內容props message 父頁面傳值內容，以this.message賦值。父元件 子元件 子元件向父元件傳值 子傳值 傳送傳值內容 th...

Vue父子傳值 1 父傳子

哇 搞了這麼多天的vue,總是弄不明白vue的父子傳值，今天終於搞清楚了，vue中有三種傳值方法，這裡先說一種 父傳子 這裡我使用vue根元件作為父元素 在父元素中給了乙個名為user的陣列，之後我們要定義乙個子元件 我們定義子元件以後在父元件的根div中新增子元件的模板並且開始傳值 所以我們在子元...

vue 父子元件傳值（父傳子）

在專案中經常會用到傳值的情況，今天說下父傳子的傳值方法 父元件使用 v model 繫結，並在標籤裡傳值，引入子元件 v model radio change changemax v model addcaglabel v for item in radiopay key item.value la...