Transfer values between VUE components

The parent component parent. Vue

<template>
  <div class=' '>The parent component<child-com ref="childCom" fromParent="I am the value of the parent component"></child-com>
  </div>
</template>
<script>
import childCom from '@/components/childCom.vue'
export default {
  components: { childCom },
}
</script>
Copy the code

Subcomponents childCom. Vue

<template>
  <div>Child components<div>FromParent: {{fromParent}}</div>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    fromParent: {
      type: String.default: ""}}},Copy the code

Parent component passes to child component

Child components

props: {
    fromParent: {
      type: String.default: ""}},Copy the code

The parent component

<child-com ref="childCom" fromParent="I am the value of the parent component"></child-com>
/ / or
this.$refs.childCom.childVal = "I am the value of the parent component";// Assign a non-prop value to the child component
this.$refs.childCom.childMT();// Invoke child component methods
Copy the code

Child component passes to parent component

Child components

this.$emit("setParentVal"."childToParent");
/ / or
 this.$parent.parentVal = "childToParent";// Assign to the parent component
 this.$parent.parentMT();// Call the parent component method
Copy the code

The parent component

/ / $emit way
<child-com ref="childCom" @setParentVal="getValFromChild"></child-com> 
getValFromChild(val){
  console.log(val);//childToParent 
}
Copy the code