溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編這次要給大家分享的是Vue組件間怎么數據傳遞，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
通過 props 傳遞屬性
父級給demo2組件綁定一個msg數據
父組件
<template>
<div class='container'>
<demo2 :msg="msg" @change="change" />
</div>
</template>
<script>
import demo2 from './demo2'
export default {
data(){
return {
msg:'這是測試數據'
}
},
methods:{
change(value){
this.msg = value
}
},
components: {
demo2
}
}
</script>子組件通過定義props來使用msg，$emit觸發外部的函數來改變父級傳入的值
子組件
<template>
<div class='container'>
{{msg}}
<button @click="change">點一下</button>
</div>
</template>
<script>
export default {
props:['msg'],
methods:{
change(){
this.$emit('change','這是新的數據')
}
}
}
</script>通過 $attrs 來收集屬性
$attrs 會收集組件上綁定的屬性，對應class和style不會處理。如果與props同用，props的優先級要高于attrs
父組件
<template>
<div class="container">
<demo2 class="demo" :msg="msg" />
</div>
</template>
<script>
import demo2 from "./demo2";
export default {
data() {
return {
msg: "這是測試數據"
};
},
components: {
demo2
}
};
</script>子組件中this.$attrs會收集組件上綁定的屬性
子組件
<template>
<div class="container">{{$attrs.msg}} </div>
</template>
<script>
export default {
// inheritAttrs:true,
// 會隱藏行間的屬性
// props:['msg'],
// 這里props的優先級比$attrs要高，如果設置了props，那么msg會在data上，而$attrs中就沒有msg
created(){
console.log(this.$attrs)
// 對象中只有msg一個屬性
}
};
</script>通過$listeners 來收集方法
$listeners 會收集組件上綁定的方法。 可以通過傳遞實參的方式改變父組件的值
父組件
<template>
<div class='container'>
{{msg}}
<demo2 class="demo" @msgChange="change"/>
</div>
</template>
<script>
import demo2 from './demo2'
export default {
data () {
return {
msg: '這是測試數據'
}
},
methods: {
change(newvalue){
this.msg = newvalue;
}
},
components: {
demo2
}
}
</script>子組件中this.$listeners會收集綁定在組件上的方法。通過this.$listeners.XXX()可以直接調用，以此可以來修改父組件data中的值
子組件
<template>
<div class="container">
<button @click="change">點一下</button>
</div>
</template>
<script>
export default {
// inheritAttrs:true,
created(){
console.log(this)
},
methods:{
change(){
// this.$emit('msgChange')
// this.$parent.change()
// 與$emit功能相同，$parent也能夠實現該效果
this.$listeners.msgChange('改變后的值')
}
}
};
</script>通過provide提供依賴，inject注入依賴實現數據跨多級子組件傳遞
通過給父級的 provide 提供一個依賴對象，讓其所用子組件都能訪問到這個對象
“
provide 和 inject 綁定并不是可響應的。這是刻意為之的。然而，如果你傳入了一個可監聽的對象，那么其對象的 property 還是可響應的。
”
其實也就是說provide 和 inject 綁定本身不做額外的事情（數據綁定之類），只是將提供的數據暴露給子組件。那么暴露出來的數據是不是可相應的就取決與數據本身
父組件
<template>
<div class='container'>
<demo2 class="demo" :msg="msg" @msgChange="change"/>
</div>
</template>
<script>
import demo2 from './demo2'
export default {
provide(){
return {
msg:this.msg,
msgChange:this.change,
// 這里this本身就是一個可監聽的對象。
// this也就是當前vue實例本身已完成了數據響應，這里只是將這個實例暴露給了他的所用子組件
app:this
}
},
data () {
return {
msg: '這是測試數據'
}
},
methods: {
change(){
this.msg += 1;
}
},
components: {
demo2
}
}
</script>后代的子組件可以通過reject注入相應的依賴
子組件
<template>
<div class="container">
<!-- 這個msg的值不會變 -->
<div>{{msg}} </div>
<!-- msg的值會變，因為依然指向父組件的vue實例 -->
<div>{{app.$data.msg}}</div>
<button @click="msgChange">點一下</button>
</div>
</template>
<script>
export default {
inject:['msg','msgChange','app']
};
</script>通過 ref 獲取組件實例
ref 屬性定義在組件上獲取的是組件的vue實例，定義在原生標簽上獲取的是對應的dom
需要等掛載之后才能拿到$refs中的內容
父組件
<template>
<div class='container'>
{{msg}}
<demo2 ref="test"/>
</div>
</template>
<script>
import demo2 from './demo2'
export default {
data () {
return {
msg: ''
}
},
// 需要等掛載之后才能拿到$refs中的內容。
// 所用不能在模板中使用
mounted(){
this.msg = this.$refs.test.msg
},
components: {
demo2
}
}
</script>子組件
<script>
export default {
data(){
return {
msg:'這是子組件的數據'
}
}
}
</script>通過\$parent/$children 獲取組件實例
同樣的也是必須在mounted之后才能獲取對應實例
這里是父組件展示子組件中的msg，子組件展示父組件的msg
父組件通過$children獲取子組件實例
父組件
<template>
<div class='container'>
{{msg}}
<demo2/>
</div>
</template>
<script>
import demo2 from './demo2'
export default {
data () {
return {
msg: '',
fatherMsg:"這是父組件的內容"
}
},
mounted(){
console.log(this.$children)
//獲取子組件實例上的sonMsg，$children是個數組需要選擇對應的索引
this.msg = this.$children[0].sonMsg;
},
components: {
demo2
}
}
</script>子組件通過$paren獲取父組件實例
子組件
<template>
<div class='container'>
{{msg}}
</div>
</template>
<script>
export default {
data () {
return {
msg:'',
sonMsg: '這是子組件的數據'
}
},
mounted(){
//獲取父組件的實例上的fatherMsg
this.msg = this.$parent.fatherMsg;
}
}
</script>定義 eventBus 共享數據
在Vue原型上添加一個$bus為一個新的vue對象，可以在全局的vue實例中通過$bus獲取到這個vue對象，從而獲取這個對象上的屬性和方法。
在main.js中定義
Vue.prototype.$bus = new Vue({
data:{
a:1,
b:2
},
methods:{
log(){
console.log(this.a)
}
}
})全局Vue實例都能獲取到定義在$bus上的屬性和方法
通過 Vuex 共享數據
官方給出的跨多組件傳遞數據的解決方案。
store index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
test:'123123123',
test2:'123123123',
},
mutations: {
changeTest(state,payload){
console.log(state,payload)
state.test = payload.value
},
changeTest2(state,payload){
console.log(state,payload)
state.test2 = payload.value
}
},
actions: {
asyncChageTest({commit},payload){
setTimeout( ()=>{
commit('changeTest2',payload)
},2000)
}
},
modules: {
}
})在組件中使用
<template>
<div class='container'>
{{this.$store.state.test}}
{{test}}
{{this.$store.state.test2}}
{{test2}}
<button @click="change">點一下</button>
<button @click="asyncChange">點一下</button>
</div>
</template>
<script>
// 引入mapState輔助函數改造state數據
import { mapState,mapMutations,mapActions } from 'vuex'
export default {
data(){
return {
msg:'這是測試數據'
}
},
computed:{
...mapState(['test','test2'])
},
methods:{
// 放異步或者同步的方法引入
...mapMutations(['changeTest']),
...mapActions(['asyncChageTest']),
change(){
// 同步修改state值的兩種方法
this.$store.commit('changeTest',{value:'改變后test的值'});
// this.changeTest({value:'改變后的值'})
},
asyncChange(){
// 異步修改state值的兩種方法
this.$store.dispatch('asyncChageTest',{value:'改變后test2的值'})
// this.asyncChageTest({value:'改變后test2的值'})
}
},
}
</script>以上就是對Vue中組件間數據傳遞的方式進行了一個總結，在日常的開發中還是需要根據使用的場景采取合適的方式進行數據的傳遞
看完這篇關于Vue組件間怎么數據傳遞的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
