实现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;
   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{
     300px;
    height: 700px;
    background-color: antiquewhite;
}
.userlist ul li{
    display: flex;
}
.userlist ul li img{
     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{
     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{
     300px;
    height: 700px;
    background-color: antiquewhite;
}
.userlist ul li{
    display: flex;
}
.userlist ul li img{
     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;
   700px;
  height: 800px;
  margin: 100px auto;
}
</style>

至此VUE子父组件传值完成。