VUE中父子组件之间传值

灰太狼 2023-07-09 13:29 8阅读 0赞

##### VUE 中父组件向子组件传值 #####

**直接贴代码了，这里是片段代码，仔细看并尝试写一下应该是没有问题的。**

###### 父组件： ######

<template>
    <div>
    	<companyInfo ref="companyInfo" :companyinfo="companyinfo" ></companyInfo>
    </div>	
    </template>
    <script>
    import companyInfo from "src/components/companyInfo.vue" 
    export default {
            components: {
                companyInfo,
            },
    		data(){
       			 return{
           		 companyinfo: {},  // 显示公司信息
    		},
    }
    </script>

###### 子组件： ######

<template>
    	<div class="healthyState"> 状态：{
       { companyinfo.healthyState}}</div>
    </template>
    <script>
    export default {
            name: "companyInfo",
    		data(){
        		return{
           		 	companyDatas:{
    					healthyState:”健康”
    				}
    			}
    		},
    		props:['companyinfo'],
    }
    </script>

> 这里父组件通过 ":companyinfo=“companyinfo” 方式将值传入子组件，父组件值改变子组件值随之改变。子组件则通过props(值为数组类型)方式接收父组件值。

##### VUE中子组件向父组件传值 #####

###### 子组件： ######

###### 父组件： ######

<template>
    <div>
    	<companyInfo ref="companyInfo" :companyinfo="companyinfo" @upBottom="updateBottom($event)"></companyInfo>
    </div>
    </template>
    <script>
    export default {
            components: {
                companyInfo
            },
            mounted() {
               let show = this.$refs.companyInfo.companyInfo_show;
            },
    		methods: {
    			updateBottom(val) {
        			document.getElementById("bottom").style.bottom = val + 'vh';
    			}
    		}
    }
    </script>

> 子组件中通过$emit()方式进行传值，第一个参数为方法为方法名，第二参数为需要传的值，父组件中则通过引入的子组件模板调用。

**注：upBottom子组件中的方法，$event为子组件传过来的值。**

> 这种方式或许复杂了些，但根据当时的需求来这种方法可以很好的解决的问题。**还有以一种方式 通过this.$refs.companyInfo.companyInfo\_show来获取子组件的值 这种方式似乎更简便一些。**