八种vue实现组建通信的方式

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

<script>
import Son from '@/components/son'
  export default{
    name:'Father',
    components:{Son},
    data(){
      return{
        fData:'我是父组件向子组件传递的值-props方式'
      }
    }
  }
</script>

<template>
  <div>我是父组件的数据：{{fData}}</div>
  <div @click=changeData>我是父组件传递修改后的数据：{{mydata}}</div>
</template>
<script>
  export default{
    name:'Son',
    props:{
      fData:{
        type:String,
        default:''
      }
    }
    data(){
      mydata:this.fatherData
    },
    methods:{
     changeData(){
        this.mydata += '改变数据'
      }
    },
  }
</script>

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

<el-button @click="handleEmit">改变父组件</el-button>

<script>
 export default{
   name:'Son',
   methods:{
     handleEmit(){
       this.$emit('triggerEmit','子组件的数据')
     }
   }
 }
</script>

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

<script>
 import Son from '@/components/son'
 export default{
   name:'Father',
   components:{Son},
   methods:{
     changeData(name){
       console.log(name) // => 我是来自子组件的数据
     }
   }
 }
</script>

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

<p>姓名：{{ myName }}</p>
<button @click="changeName">修改姓名</button>
    
<script>
export default{
  props: {
    myName:String
  },
  methods: {
    changeName() {
      this.$emit('changeName', '新数据名称')
    }
}
}
</script>

<p>姓名：{{ newName }}</p>
    
<script>
export default{
  props: {
    myName:String
  }
}
</script>

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

<template>
  <div>
    <div>我是通信组件A</div>
    <button @click="changeName">修改姓名</button>
  </div>
</template>

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

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

<template>
  <div>
  <span>名称：{{name}}</span>
    <div>我是通信组件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>我是子组件</div>
</template>

<script>
export default{
  name:"Son",
  data(){
    return{
      sonTitle: '我是子组件的数据'
    }
  },
  methods:{
    sonHandle(){
      console.log('我是子组件的方法')
    }
  },
  created(){
    console.log(this.$parent)
    console.log(this.$parent.fatherTitle) // => 我是父组件的数据
    this.$parent.fantherHandle() // => 我是父组件的方法
  }
}
</script>

<template>
  <div>
    <Son>我是父组件</Son>
  </div>
</template>

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

export default{
  name: 'father',
  components:{
    Son
  },
  data(){
    return{
      fatherTitle: '我是父组件的数据'
    }
  },
  methods:{
    fantherHandle(){
      console.log('我是父组件的方法')
    }
  },
  mounted(){
    console.log(this.$children)
    console.log(this.$children[0].sonTitle) // => 我是子组件的数据
    this.$children[0].sonHandle() // => 我是子组件的方法
  }
}
</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) 
  }
}
</script>

export default{
 provide: {
   return{
     provideName: '贩卖前端仔'
   }
 }
}

export default{
  inject: ['provideName'],
  created () {
    console.log(this.provideName) // => "贩卖前端仔"
  }
}

<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: {
  }
})