Vue parent-child component mutual value transfer and call

<template>
  <div>
    <p class="father">Father component</p>
    <child :sid="id"></child>
  </div>
</template>

<script>
import child from './child'
export default {
  components:
    child
  },
  data() {
    return {
      id:'1234' // value passed from parent component to child component}
  }
}
</script>

<template>
  <div>
    <p class="child">Child component</p>
    <p class="child">The value of the parent component received is: {{ sid }}</p>
  </div>
</template>

<script>
export default {
  props:{
    sid:{
      type:String,
      default: '0'
    }
  },
  // props:["sid"],
  data() {
   return { 

   } 
 } 
} 
</script>

<template>
  <div>
    <p class="father">Father component</p>
   <p class="father">Receive the value of the child component: {{childSid}}</p>
    <child @passValue="parentPassValue"></child>
  </div>
</template>

<script>
import child from './child'
export default {
  components:
    child
  },
  data() {
    return {
      childSid:'' // Receive the value of the child component}
  },
  methods: {
    parentPassValue(data) {
      this.childSid = data;
    }
  }
}
</script>

<template>
  <div>
    <p class="child">Child component</p>
    <button @click="valueClick">Pass value</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    valueClick() {
      this.$emit('passVaule',19)
    }
  }
}
</script>

<template>
  <div>
    <p class="father">Father component</p>
    <child @funValue="parentFunValue"></child>
  </div>
</template>

<script>
import child from './child'
export default {
  components:
    child
  },
  data() {
    return {
    }
  },
  methods: {
    parentFunValue() {
      console.log('The function in the parent component is called');
    }
  }
}
</script>

<template>
  <div>
    <p class="child">Child component</p>
    <button @click="funClick">Call parent component method</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    funClick() {
      this.$emit('funVaule')
    }
  }
}
</script>

<template>
  <div>
    <p class="father">Father component</p>
    <button @click="childClick">Call child component method</button>
    <child ref="mychild"></child>
  </div>
</template>

<script>
import child from './child'
export default {
  components:
    child
  },
  data() {
    return {
    }
  },
  methods: {
    childClick() {
      this.$refs.mychild.testNum(1)
    }
  }
}
</script>

<template>
  <div>
    <p class="child">Child component</p>
</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    testNum(data) {
      console.log('The method in the child component is called:', data);
    }
  }
}
</script>