实现VUE子父组件调用传值
基本知识
父子组件的关系可以总结为:props down, events up
父组件通过 props 向下传递数据给子组件;子组件通过 events 给父组件发送消息。
1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。
父组件调用传值给子组件
1.Home.vue
将userlist
和currentUser
分别传给相应的子组件userlistcom
和chatcom
<template>
<div class="home">
<div class="content">
<chat-com :currentUser="currentUser"></chat-com>
<userlist-com :userlist="userlist" @chooseuser='toggleUser'></userlist-com>
</div>
</div>
</template>
<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import chatCom from '@/components/chatcom'
import userlistCom from '@/components/userlistcom'
export default {
name: 'Home',
components: {
chatCom , userlistCom
},
data(){
return {
msg:'聊天软件',
userlist:[
{
username:"小米",headimg:require('../assets/img/face/1.jpg')
},
{
username:"小夏",headimg:require('../assets/img/face/2.jpg')
},
{
username:"小牛",headimg:require('../assets/img/face/3.jpg')
},
{
username:"小虎",headimg:require('../assets/img/face/4.jpg')
},
{
username:"小喵",headimg:require('../assets/img/face/5.jpg')
}
],
currentUser:{
username:"小米",
headimg:require('../assets/img/face/1.jpg')
}
}
},
methods:{
toggleUser:function(index){
this.currentUser= this.userlist[index]
}
}
}
</script>
<style scoped>
.content{
display: flex;
width: 700px;
height: 800px;
margin: 100px auto;
}
</style>
2.userlistcom.vue
使用props:['userlist']
,接收对应父组件传来的数据,并进行渲染。
<template>
<div class="userlist">
<h1>用户列表</h1>
<ul>
<li v-for="(item,index) in userlist" :key="'userlist'+index" @click="chooseUser(index)">
<img :src="item.headimg" />
<h3>{{item.username}}</h3>
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return {
}
},
props:['userlist'],
methods:{
chooseUser:function(index){
//将选中事件传给父元素
this.$emit('chooseuser',index)
}
}
}
</script>
<style scoped>
.userlist{
width: 300px;
height: 700px;
background-color: antiquewhite;
}
.userlist ul li{
display: flex;
}
.userlist ul li img{
width: 80px;
height: 80px;
}
</style>
3.chatcom.vue
使用props:['currentUser']
,接收对应父组件传来的数据,并进行渲染。
<template>
<div class="chat">
<h1 class="user">用户:{{currentUser.username}}</h1>
</div>
</template>
<script>
export default {
props:['currentUser']
}
</script>
<style scoped>
.chat{
width: 700px;
display: flex;
height: 700px;
border: 1px solid #ccc;
}
</style>
子组件调用传值给父组件
1.userlistcom.vue
使用this.$emit('chooseuser',index)
,调用父组件指定方法,并传值。
<template>
<div class="userlist">
<h1>用户列表</h1>
<ul>
<li v-for="(item,index) in userlist" :key="'userlist'+index" @click="chooseUser(index)">
<img :src="item.headimg" />
<h3>{{item.username}}</h3>
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return {
}
},
props:['userlist'],
methods:{
chooseUser:function(index){
//将选中事件传给父元素
this.$emit('chooseuser',index)
}
}
}
</script>
<style scoped>
.userlist{
width: 300px;
height: 700px;
background-color: antiquewhite;
}
.userlist ul li{
display: flex;
}
.userlist ul li img{
width: 80px;
height: 80px;
}
</style>
2.Home.vue
中的chooseuser
被调用后执行绑定方法toggleUser
。
<template>
<div class="home">
<div class="content">
<chat-com :currentUser="currentUser"></chat-com>
<userlist-com :userlist="userlist" @chooseuser='toggleUser'></userlist-com>
</div>
</div>
</template>
<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import chatCom from '@/components/chatcom'
import userlistCom from '@/components/userlistcom'
export default {
name: 'Home',
components: {
chatCom , userlistCom
},
data(){
return {
msg:'聊天软件',
userlist:[
{
username:"小米",headimg:require('../assets/img/face/1.jpg')
},
{
username:"小夏",headimg:require('../assets/img/face/2.jpg')
},
{
username:"小牛",headimg:require('../assets/img/face/3.jpg')
},
{
username:"小虎",headimg:require('../assets/img/face/4.jpg')
},
{
username:"小喵",headimg:require('../assets/img/face/5.jpg')
}
],
currentUser:{
username:"小米",
headimg:require('../assets/img/face/1.jpg')
}
}
},
methods:{
toggleUser:function(index){
this.currentUser= this.userlist[index]
}
}
}
</script>
<style scoped>
.content{
display: flex;
width: 700px;
height: 800px;
margin: 100px auto;
}
</style>
至此VUE子父组件传值完成。