Vue组件通信深入分析

<template>
  <div>
    Person
    <Student1 name="jack" age="18"></Student1>
    </div>
</template>
<script>
import Student1 from './Student1'
export default {
    name: 'Person',
    components: {
        Student1,
    },
</script>

<template>
  <div>
    Student1
    {{name}},{{age}}
  </div>
</template>
<script>
export default {
    name: 'Student1',
    props: {
        name: String,
        age:Number,
    }
}
</script>

<template>
  <div>
    Student1
    <button @click="giveData()">点我传递数据</button>
  </div>
</template>
<script>
export default {
    name: 'Student1',
    methods: {
        giveData() { 
            this.$emit('add', '12345');
        }
    },
}
</script>

<template>
  <div>
    Person
    <Student1 @add="cartAdd($event)"></Student1>
    </div>
</template>
<script>
import Student1 from './Student1'
export default {
    name: 'Person',
    components: {
        Student1,
    },
    methods: {
        cartAdd(event) { 
            console.log(event);
        }
    },
}
</script>

<template>
  <div>
    Person
    <Student2 ref="foo"></Student2>
    <button @click="getRef()">点击获取ref数据</button>
  </div>
</template>
<script>
import Student2 from "./Student2";
export default {
  name: "Person",
  components: {
    Student2,
  },
  methods: {
    getRef() {
      console.log(this.$refs.foo);
    },
  },
};
</script>

beforeCreate() {
  Vue.prototype.$bus = this
}

<template>
  <div>
    Student2
    <button @click="getBus()">点我获取全局事件总线数据</button>
  </div>
</template>
<script>
export default {
  name: 'Student2',
  data() {
    return {
      name: 'fanafan',
      age:'17'
    }
  },
  methods:{
    getBus(){
      this.$bus.$emit('bus',this.name)
    }
  }
}
</script>

mounted() {
    this.$bus.$on('bus', (data) => { 
        console.log(data)
    })
},

Vue.prototype.$parent = this

// 传数据
this.$parent.$emit('parent',this.age)
//接数据
this.$parent.$on('parent', (data) => {
    console.log(data);
})