vue组件传参一共有三种类型,分别是父向子传参、子向父传参和兄弟之间传参。具体介绍如下:
1、父向子传参: 父组件通过 props 向子组件传递数据,子组件通过 props 接收数据。父组件传递数据时,可以使用 v-bind 或简写的 ":",子组件接收数据时,需要在 props 中声明接收的数据类型。示例代码如下:
父组件:
<template>
<div>
<child-component :message="msg"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
msg: 'Hello World!'
}
}
}
</script>
子组件:
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
props: {
message: String
}
}
</script>
也可以通过$refs向子组件传参,通过父组件调用子组件的方法来达到传参的目的,我这里通过点击事件触发传参,也可以通过其他方法事件。示例代码如下:
父组件:
<template>
<div>
<el-button @click="getData()"></el-button>
<child-component ref="childs"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
msg: 'Hello World!'
}
},
methods: {
getData() {
this.$refs.childs.onLoad(this.msg)
}
}
}
</script>
子组件:
<template>
<div>
<p>{{msgs}}</p>
</div>
</template>
<script>
export default {
data() {
return {
msgs: ''
}
},
methods: {
onLoad(msg) {
this.msgs = msg
}
}
}
</script>
2、子向父传参: 子组件通过 $emit 触发一个自定义事件,并传递数据,父组件通过 v-on 监听这个自定义事件,并接收数据。示例代码如下:
子组件:
<template>
<div>
<button @click="sendMessage">发送消息</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello World!'
}
},
methods: {
sendMessage() {
this.$emit('send-message', this.message)
}
}
}
</script>
父组件:
<template>
<div>
<child-component @send-message="receiveMessage"></child-component>
<p>接收到的消息:{{ receivedMessage }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
receivedMessage: ''
}
},
methods: {
receiveMessage(message) {
this.receivedMessage = message
}
}
}
</script>
3、兄弟之间传参: 兄弟组件之间的传参需要借助一个共同的父组件,通过父组件作为中介来传递数据。具体实现方式有两种,一种是通过事件总线来实现,另一种是通过 Vuex 状态管理来实现。这里以事件总线为例,示例代码如下:
父组件(事件总线):
<template>
<div>
<child-component-1></child-component-1>
<child-component-2></child-component-2>
</div>
</template>
<script>
import Vue from 'vue'
import ChildComponent1 from './ChildComponent1.vue'
import ChildComponent2 from './ChildComponent2.vue'
export default {
components: {
ChildComponent1,
ChildComponent2
},
created() {
Vue.prototype.$bus = this
}
}
</script>
兄弟组件1:
<template>
<div>
<button @click="sendMessage">发送消息</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello World!'
}
},
methods: {
sendMessage() {
this.$bus.$emit('send-message', this.message)
}
}
}
</script>
兄弟组件2:
<template>
<div>
<p>接收到的消息:{{ receivedMessage }}</p>
</div>
</template>
<script>
export default {
data() {
return {
receivedMessage: ''
}
},
created() {
this.$bus.$on('send-message', message => {
this.receivedMessage = message
})
}
}
</script>