Eight examples of how Vue implements component communication

<Son :datas="fData"></Son>

<script>
import Son from '@/components/son'
  export default{
    name:'Father',
    components:{Son},
    data(){
      return {
        fData:'I am the value passed from the parent component to the child component - props method'
      }
    }
  }
</script>

<template>
  <div>I am the data of the parent component: {{fData}}</div>
  <div @click=changeData>I am the parent component passing the modified data: {{mydata}}</div>
</template>
<script>
  export default{
    name:'Son',
    props:{
      fData:{
        type:String,
        default:''
      }
    }
    data(){
      mydata:this.fatherData
    },
    methods:{
     changeData(){
        this.mydata += 'Change data'
      }
    },
  }
</script>

props:{
    fData:{
        type:[String,Number],
        default:''
    }
}

<el-button @click="handleEmit">Change parent component</el-button>

<script>
 export default{
   name:'Son',
   methods:{
     handleEmit(){
       this.$emit('triggerEmit','subcomponent data')
     }
   }
 }
</script>

<Son @triggerEmit="changeData"></Son>

<script>
 import Son from '@/components/son'
 export default{
   name:'Father',
   components:{Son},
   methods:{
     changeData(name){
       console.log(name) // => I am the data from the child component}
   }
 }
</script>

<childA :myName="name"></ChildA>
<ChildB :myName="name" @changeName="editName"></ChildB>  
    
export default{
  data() {
    return {
      name: 'Hello Data'
    }
  },
  methods: {
    editName(name){
      this.name = name
    }
  }
}

<button @click="changeName">Change name</button>
    
<script>
export default{
  props: {
    myName:String
  },
  methods: {
    changeName() {
      this.$emit('changeName', 'new data name')
    }
}
}
</script>

<p>Name: {{ newName }}</p>
    
<script>
export default{
  props: {
    myName:String
  }
}
</script>

import Vue from "vue"
const bus = new Vue()
export default bus

<template>
  <div>
    <div>I am communication component A</div>
    <button @click="changeName">Change name</button>
  </div>
</template>

<script>
import bus from "@/utils/Bus.js";
export default {
  components: {},
  data() {
    return {};
  },
  mounted() {
    console.log(bus);
  },
  methods: {
    changeName() {
      bus.$emit("editName", "dataset!");
    },
  },
};
</script>

<style lang='scss' scoped>
</style>

<template>
  <div>
  <span>Name: {{name}}</span>
    <div>I am communication component B</div>
  </div>
</template>

<script>
import bus from "@/utils/Bus.js";
export default {
  components: {},
  data() {
    return {name};
  },
  mounted() {
    bus.$on("editName", (name) => {
        this.name=name
      console.log(name); // 
    });
  },
  methods: {},
};
</script>

<style lang='scss' scoped>
</style>

<template>
  <div>I am a child component</div>
</template>

<script>
export default{
  name:"Son",
  data(){
    return {
      sonTitle: 'I am the data of the child component'
    }
  },
  methods:{
    sonHandle(){
      console.log('I am a method of a subcomponent')
    }
  },
  created(){
    console.log(this.$parent)
    console.log(this.$parent.fatherTitle) // => I am the data of the parent component this.$parent.fantherHandle() // => I am the method of the parent component }
}
</script>

<template>
  <div>
    <Son>I am the parent component</Son>
  </div>
</template>

<script>
import Son from './son.vue'

export default{
  name: 'father',
  components:{
    Son
  },
  data(){
    return {
      fatherTitle: 'I am the data of the parent component'
    }
  },
  methods:{
    fantherHandle(){
      console.log('I am the method of the parent component')
    }
  },
  mounted(){
    console.log(this.$children)
    console.log(this.$children[0].sonTitle) // => I am the data of the child component this.$children[0].sonHandle() // => I am the method of the child component }
}
</script>

<template>
  <div>
    <Son ref="son"></Son>
  </div>
</template>

<script>
import Son from './son.vue'

export default{
  name: 'father',
  components:{
    Son
  },
  mounted(){
    console.log(this.$refs.son) /*Component instance*/
  }
}
</script>

/* Parent component */
export default{
 provide:
   return {
     provideName: 'Selling front-end'
   }
 }
}

/*Subcomponent*/
export default{
  inject: ['provideName'],
  created () {
    console.log(this.provideName) // => "Selling front-end"
  }
}

<template>
  <div>
    <div class="isSon">
        <slot :info='arrList'></slot>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {arrList:[1,'aa','张三']};
  },
  mounted() {
  },
  methods: {
    
  },
};
</script>

<template>
<div>
    <SonG>
        <span slot-scope="props">
            <ul>
                aa
                <li v-for="item in props.info" :key="item">
                    {{item}}
                </li>
            </ul>
        </span>
    </SonG>
</div>
</template>

<script>

import SonG from '../components/SonG.vue'
export default {
   components:{
       SonG
   },
   data () {
       return {
       }
   }
}
</script>

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations:
  },
  actions: {
  },
  modules:
  }
})