vue组件通信

父与子组件通信：--子组件里面通过props接收父组件传过来的数据

1.父组件调用子组件的时候绑定动态属性
<v-header :title="title"></v-header>
2、在子组件里面通过 props接收父组件传过来的数据
props:['title']

props:{
'title':String
}

子

Header.vue:

<template>
  <div>
    <h2>{{title}}</h2>
    <h2>{{homemsg}}</h2>
    <button @click="run('123')">执行父组件的方法</button>
    <button @click="getParent()">获取父组件的数据和方法</button>
  </div>
</template>

<script>
    export default {
        name: "Header",
        props:['title','homemsg','run','home'],
        methods:{
            getParent(){
                console.log('this.title:',this.title);
                console.log('this.home.title:',this.home.title);
                this.home.run('456')
            }
        }
    }
</script>

<style scoped>

</style>

父

MyHome.vue:

<template>
    <div>
      <Header :title="title" :homemsg='msg' :run="run" :home="this"></Header>
    </div>
</template>

<script>
  import Header from "./Header";
    export default {
        name: "MyHome",
        data(){
          return{
              msg:'我是一个home组件',
              title:'首页'
          }
        },
        components:{
            Header
        },
        methods:{
            run(data){
                alert('我是Home组件的run方法'+data);
            }
        }
    }
</script>

<style scoped>

</style>

父组件主动获取子组件的数据和方法：--$refs

1.调用子组件的时候定义一个ref
<v-header ref="header"></v-header>
2.在父组件里面通过
this.$refs.header.属性
this.$refs.header.方法

父

<template>
    <div>
      <Header ref="header" :title="title" :homemsg='msg' :run="run" :home="this"></Header>
      <button @click="getChildData()">获取子组件的数据</button>
      <button @click="runChildMethod()">执行子组件的方法</button>
    </div>
</template>

    methods:{
//...
        
            getChildData(){
                alert(this.$refs.header.msg);
            },
            runChildMethod(){
                this.$refs.header.getParent();
            }
        }

子组件主动获取父组件的数据和方法：$parent

this.$parent.数据
this.$parent.方法

子

  <button @click="getParent2()">主动获取父组件的数据和方法</button>

        methods:{
            getParent2(){
                console.log('$parent.msg:',this.$parent.msg);
                this.$parent.run('aaaa');
            }
        }

非父子组件传值：$emit,$on

1、新建一个js文件然后引入vue 实例化vue 最后暴露这个实例
2、在要广播的地方引入刚才定义的实例
3、通过 VueEmit.$emit('名称','数据')
4、在接收收数据的地方通过 $om接收广播的数据
VueEmit.$on('名称',function(){

})

New1.vue

<template>
    <div>
      New组件
      <button @click="emitNew1()">New1发送广播数据</button>
    </div>
</template>

<script>
    import VueEvent from "../model/VueEvent";
    export default {
        name: "New1",
        data(){
            return{
                msg:'我是New1组件'
            }
        },
        methods:{
            emitNew1(){
                VueEvent.$emit('from-New1',this.msg);
            }
        },
        mounted() {
            VueEvent.$on("from-Home1",function (data) {
                console.log("接受的消息",data)
            });
        }
    }
</script>

<style scoped>

</style>

Home1.vue

<template>
    <div>
      Home1组件
      <button @click="emitHome1()">emitHome1发送广播数据</button>
    </div>
</template>

<script>
    import VueEvent from "../model/VueEvent";
    export default {
        name: "Home1",
        data(){
            return{
                msg:'我是Home1组件'
            }
        },
        methods:{
            emitHome1(){
                VueEvent.$emit("from-Home1",this.msg)
            }
        },
        mounted() {
            VueEvent.$on("from-New1",function (data) {
                console.log("接受的消息",data)
            });
        }
    }
</script>

<style scoped>

</style>

VueEvent.js

/**
 * Vue实例
 */


import Vue from 'vue';

var VueEvent = new Vue();

export default VueEvent;

附：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非父子组件</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <child content="Lee"></child>
    <child content="Amy"></child>
</div>
<script>
    /*全局变量*/
    Vue.prototype.mybus = new Vue();
    Vue.component('child',{
        props:{
            content:String
        },
        data:function(){
          return{
              selfContent:this.content
          }
        },
        template:'<div @click="handleChildClick">{{selfContent}}</div>',
        methods:{
            handleChildClick:function () {
                this.mybus.$emit('change',this.selfContent)
            }
        },
        mounted:function () {
            var that = this;
            this.mybus.$on('change',function (msg) {
                that.selfContent = msg
            })
        }
    });
    vm = new Vue({
        el: '#app',
        data: {},
        methods:{
            handleChild:function () {
                alert('child')
            }
        }
    })
</script>
</body>
</html>

View Code