javascript - 两个子组件之间的数据传输问题
问题描述
下午好,我有两个子组件 Header 和 Pagination。在标题中,我有一个输入搜索引擎和两个输入(标题和正文),以便能够将帖子添加到分页。我设法将搜索值传输到分页组件,但我不知道如何从两个输入(标题、正文)传输值。我用来传输事件总线。当您单击 AddPost 按钮时,请帮我将两个输入(标题、正文)的值传递给分页组件。
我的组件标题代码:
<template>
<div class="header">
<input type="text" v-model="search" class="header_input_search" placeholder="Search" @input="saveMessage" />
<img src="src/assets/milk.png">
<div class="header_div_inputs">
<input type="text" v-model="createTitle" class="created"/>
<p><input type="text" v-model="createBody" class="createBody"/></p>
</div>
<button @click="addPost()" class="addPost">AddPost</button>
</div>
</template>
<script>
import axios from 'axios';
import {eventEmitter} from './main'
export default {
name: 'Header',
data () {
return {
search: '',
createTitle: '',
createBody: '',
}
},
methods:{
saveMessage(){
eventEmitter.$emit('messageSave', this.search)
},
}
}
</script>
我的组件分页代码:
<template>
<div class = "app">
<ul>
<li v-for="(post, index) in paginatedData" class="post" :key="index">
<router-link :to="{ name: 'detail', params: {id: post.id, title: post.title, body: post.body} }">
<img src="src/assets/nature.jpg">
<p class="boldText"> {{ post.title }}</p>
</router-link>
<p> {{ post.body }}</p>
</li>
</ul>
<div class="allpagination">
<button type="button" @click="page -=1" v-if="page > 0" class="prev"><<</button>
<div class="pagin">
<button class="item"
v-for="n in evenPosts"
:key="n.id"
v-bind:class="{'selected': current === n.id}"
@click="page=n-1">{{ n }} </button>
</div>
<button type="button" @click="page +=1" class="next" v-if="page < evenPosts-1">>></button>
</div>
</div>
</template>
<script>
import {mapState} from 'vuex'
import {eventEmitter} from './main'
export default {
name: 'app',
data () {
return {
current: null,
page: 0,
visiblePostID: '',
pSearch: ''
}
},
mounted(){
this.$store.dispatch('loadPosts')
},
computed: {
...mapState([
'posts'
]),
evenPosts: function(posts){
return Math.ceil(this.posts.length/6);
},
paginatedData() {
const start = this.page * 6;
const end = start + 6;
return this.filteredPosts.slice(start, end);
},
filteredPosts() {
return this.posts.filter((post) => {
return post.title.match(this.pSearch);
});
},
},
created(){
eventEmitter.$on('messageSave', (string) => {
this.pSearch = string
})
}
}
</script>
解决方案
您可以将标题和正文包装在一个对象中
addPost() {
const post = {
title: this.createTitle,
body: this.createBody
}
eventEmitter.$emit('postAdd', post)
}
然后正常听
created(){
eventEmitter.$on('postAdd', (post) => {
console.log(post)
// do whatever you want
})
}
推荐阅读
- python - 层 'meta-python' 取决于版本 >= 层 'core' 的 12
- flutter - Flutter 将函数传递给 TextEditingController(text)
- r - 在一个数据帧中的坐标处获取深度值,最接近另一个数据帧中的坐标
- python - 如何自动包装 Pylance 提供的 VSCode python intelliSence?
- android - 是否可以在 Android 中制作两个滑块 MotionLayout?
- terraform - Terraform 错误此值没有任何索引
- php - Redis / Homestead / Laravel 7 - 拒绝连接
- angular - Angular - 迭代变量并将其连接到字符串以调用函数
- php - 在 Craft CMS 3 中打开预览时出错
- laravel - Laravel:每月分期付款