正文

Vue--子组件互相传值，子组件来回传值，传值反复横跳

IP云
IP云V管理员/0 阅读
10/30
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

Vue--子组件传值，子组件来回传值，子组件传值反复横跳

我不不仅要子组件之间直接传值，我还要传过去再传回来，传回来再传过去，子组件直接反复横跳

解决问题

  1. 给组件传值，并不知道改值的校验结果
  2. 同一个组件，在不同的引用中校验方式完全不一样，需要将校验方式放到组件外面的情况

单项发送

  • 子组件一发送参数

send1() {
this.pVue.$emit('send1', {
code: this.code
})
},

  • 子组件二接收参数

this.pVue.$on('send1', data => {
this.code1 = data.code
console.log(`表格组件 => 接收参数 ${data.code}`)
this.pVue.boo = true
})

发送并接收回参

子组件一发送，子组件二接收，进行逻辑处理后返回组件一

  • 子组件一

send2() {
this.pVue.$emit('send2', {
code: this.code
}, (data) => {
console.log(`按钮组件 => 接收回传 ${data.code}`)
})
},

  • 子组件二

this.pVue.$on('send2', (data, cb) => {
this.code2 = data.code
console.log(`表格组件 => 接收参数 ${data.code}`)
// 个人逻辑... 然后返回参数
cb({
code: data.code
})
})

发送并接收会参并根据会参再发送

  • 子组件一

send3() {
this.pVue.$emit('send3', {
code: this.code
}, (data, cb) => {
console.log(`按钮组件 => 接收回传 ${data.code}`)
cb({
code: data.code
})
})
}

  • 子组件二

this.pVue.$on('send3', (data, cb) => {
this.code3 = data.code
console.log(`表格组件 => 接收参数 ${data.code}`)
// 个人逻辑... 然后返回参数
cb({
code: data.code
}, () => {
this.code4 = data.code
console.log(`表格组件 => 再次接收参数 ${data.code}`)
})
})

所有代码

  • 父组件

<template>
<div class="home">
<button-list :p-vue="pVue" />
<div style="height: 20px" />
<table-list :p-vue="pVue" />
</div>
</template><script>
import Vue from 'vue'
import ButtonList from './components/button-list'
import TableList from './components/table-list'export default {
name: 'Home',
data() {
return {
pVue: new Vue()
}
},
components: {
ButtonList,
TableList
}
}
</script><style lang="scss" scoped>
.home {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
</style>

  • 子组件一

<template>
<div>
<el-input v-model="code" placeholder="过程在控制台" />
<el-row style="margin-top: 20px">
<el-button :disabled="code ===''" type="primary" @click="send1()">单项发送</el-button>
<el-button :disabled="code ===''" type="primary" @click="send2()">发送并接收回传</el-button>
<el-button :disabled="code ===''" type="primary" @click="send3()">发送接收并再发送</el-button>
</el-row>
</div>
</template><script>
export default {
data() {
return {
code: ''
}
},
props: {
pVue: {
type: Object
}
},
methods: {
/**
* 单项发送
*/
send1() {
this.pVue.$emit('send1', {
code: this.code
})
},
/**
* 发送并接收回调
*/
send2() {
this.pVue.$emit('send2', {
code: this.code
}, (data) => {
console.log(`按钮组件 => 接收回传 ${data.code}`)
})
},
/**
* 发送接收并再发送
*/
send3() {
this.pVue.$emit('send3', {
code: this.code
}, (data, cb) => {
console.log(`按钮组件 => 接收回传 ${data.code}`)
cb({
code: data.code
})
})
}
}
}
</script>

  • 子组件二

<template>
<el-form label-width="80px">
<el-form-item label="参数1">
<el-input disabled v-model="code1"></el-input>
</el-form-item>
<el-form-item label="参数2">
<el-input disabled v-model="code2"></el-input>
</el-form-item>
<el-form-item label="参数3">
<el-input disabled v-model="code3"></el-input>
</el-form-item>
<el-form-item label="参数4">
<el-input disabled v-model="code4"></el-input>
</el-form-item>
</el-form>
</template><script>
export default {
data() {
return {
code1: '',
code2: '',
code3: '',
code4: ''
}
},
props: {
pVue: {
type: Object
}
},
watch: {
code1(newVal, oldVal) {
console.log(oldVal)
console.log(newVal)
}
},
mounted() {
if (this.pVue) {
/**
* 单项接收
*/
this.pVue.$on('send1', data => {
this.code1 = data.code
console.log(`表格组件 => 接收参数 ${data.code}`)
this.pVue.boo = true
})
/**
* 发送并接收回调
*/
this.pVue.$on('send2', (data, cb) => {
this.code2 = data.code
console.log(`表格组件 => 接收参数 ${data.code}`)
// 个人逻辑... 然后返回参数
cb({
code: data.code
})
})
/**
* 发送接收并再发送
*/
this.pVue.$on('send3', (data, cb) => {
this.code3 = data.code
console.log(`表格组件 => 接收参数 ${data.code}`)
// 个人逻辑... 然后返回参数
cb({
code: data.code
}, () => {
this.code4 = data.code
console.log(`表格组件 => 再次接收参数 ${data.code}`)
})
})
}
}
}
</script>

2020年12月12日