VUE中父子组件之间传值

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中子组件向父组件传值

子组件：

<script>
export default {
        name: "companyInfo",
        data() {
            return {
                companyInfo_show: true, 
            }
        },
		methods: {
       		closePop() {
          		 this.$emit("upBottom", 0);
     		  }
       },
}
</script>

父组件：

<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来获取子组件的值 这种方式似乎更简便一些。