Vue父子组件传值

前言：

　　之前分享过Vue子组件向父组件传单个值（https://blog.csdn.net/m0_37508531/article/details/91347711）的方法，在本次项目经历中，涉及到了Vue父组件引用了多个子组件，并且子组件更新父组件中的变量值以及子组件向父组件传一个实体等。

内容：

1.父组件引用多个子组件，子组件更新父组件中的值：

目录结构：

         

说明：父组件是basicinfo.vue，子组件是address.vue和occupation.vue

代码展示：

父组件：

<script>
import Address from '../../components/address.vue'
import Occupation from '../../components/occupation.vue'

export default {
    data(){
       return{
            isOk:true
       }
    }, 
    components: {
        Address,
        Occupation        
    },
    methods:{
        success(res){
            this.isOk = res;
        },
    }
}
  

 子组件：

<template>
template>

<script>
export default {
  name: "myAddress",
  props:['isOk'],
  created(){
        this.$emit('success',false);
  }  
}   
script> 

这样父组件就可以引用两个子组件并且子组件可以更新父组件中的值，达到更新父组件中的组件状态的效果。

 

2.子组件向父组件传实体：

父组件：

<template>
    <div>
       <webSocket @record="record">webSocket>
    div>                    
template>

<script>
import webSocket from '../../components/webSocket/webSocket'
export default {
    components: { webSocket },
    data(){
        return{
            // 事件类型
            type:'',
            msg:''
        }
    },
    methods:{
        record:function(data) {
          var vm = this;
          vm.type = data.type; 
          vm.msg = data.msg;
        }
     }
}
script>

子组件：

let data = {
    "type":vm.type,
    "msg":vm.msg
}
// 在这里使用后端返回的数据，对数据进行处理渲染
vm.$emit("record", data);

 

总结：

　　凡事需要举一反三，多思考并且付诸行动。