1. 父组件向子组件传值
props 最为常用的一种
父组件中:
第一个msg自定义,随意命名,父组件用什么名字传,子组件就用什么名字来接。
第二个msg为需要传递的数据。
<Test :msg="msg"/>
子组件中:
定义一个props来接收,两种方式都可以。对象形式的需要传入数据的数据类型。
<template>
<div>
<h1>这是子组件 _{{ msg }}</h1>
</div>
</template>
<script>
export default {
//第一种接收方式
props: {
msg: String
}
//第二种接收方式
props: ['msg']
}
</script>
2. 子组件向父组件传值
$emit
子组件中:
通过 $emit 传入两个参数,第一个是自定义事件名,第二个是需要传走的值
<template>
<div>
<h1 @click="emitCount">这是子组件 _{{ msg }}+{{ count }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
props: ['msg'],
methods: {
emitCount() {
this.$emit('emit', this.count)
}
}
}
</script>
父组件中:
在组件中通过一个函数来接收,自组件传递过来的值作为这个函数的参数来接收。
<Test :msg="msg" @emit="getEmitVal"></Test>
<script>
import Test from '../components/Test.vue';
export default {
data() {
return {
msg: '传输的数据',
emitVal: 0,
}
},
components: {
Test,
},
methods: {
getEmitVal(val) {
console.log('emit:::::', val);
this.emitVal = val
}
}
}
</script>
3. 兄弟组件间传值
通过一个共同的中转站bus来进行传递,这个bus文件内只有两行:
import Vue from 'vue'
export default new Vue()
A组件内(传值方):
引入eventbus,传数据一方使用 .$emit,第一个参数为自定义的事件名,第二个参数为需要传递的数据
<template>
<div>
<h1 @click="toBro">这是子组件test</h1>
</div>
</template>
<script>
import eventbus from '../utils/bus';
export default {
data() {
return {
msg: 'test的数据'
}
},
methods: {
toBro() {
eventbus.$emit('emitMsg', this.msg)
}
}
}
</script>
B组件内(接收方):
同样需要引入eventbus,使用 .$on来接收数据,第一个参数名为 发送数据时定义的名字,第二个参数为一个参数,函数的参数就是需要接收的值。
<template>
<div>
<h1>这是子组件tests{{ getVal }}</h1>
</div>
</template>
<script>
import eventbus from '../utils/bus';
export default {
data() {
return {
getVal: ''
}
},
mounted() {
eventbus.$on('emitMsg', (res) => {
this.getVal = res
})
}
}
</script>