vue组件间通信的方法

一、props和$emit

1. props(父组件向子组件传值)

个人理解：就是子组件自定义个属性，父组件在使用子组件时候调用这个属性同时给予属性值
第一步：在子组件中声明一个属性props（传递的数据是属于父组件的，所以不建议在子组件中修改，并且通常认为props是只读的）

 var login = {
            props: ['message'],
            template: "#login",
            //data中的数据拥有者是孩子本身，所以子组件可读可写
            data() {
                return {
                  name:"哈哈，我叫login子组件"
                }
            },

第二步：在父组件页面中，使用子组件的时候把值传递给子组件

	<div id="app">
        <login :message="msg"></login>
    </div>

第三步：然后就可以在子组件使用了，使用方法和本身的data数据一样

2、$emit（子组件向父组件传值）

个人理解：父组件自定义个方法并且在使用子组件时候绑定，子组件用$emit触发这个方法同时传递参数
第一步：在父组件的方法属性里声明一个方法（统称方法A）用于接收子组件传过来的值

//父组件
        var vm = new Vue({
            el: "#app",
            data: {
                childMsg:""
            },
            methods: {
                //1.子组件给父组件传递数据第一步：在父组件中声明一个方法用于接收子组件传递的数据
                receiveFromChild(msg){
                    this.childMsg = msg;
                }
            },
            components: {
                login
            }
        })

第二步：在父组件页面使用子组件的时候，给子组件绑定个事件用来调用方法A；

<div id="app">
        这是App组件  {{childMsg}}

        <!--2.在父组件中使用子组件的时候把刚才声明的方法传递给子组件-->
        <login @funcd="receiveFromChild"></login>
    </div>

第三步：在子组件中使用$emit触发上面绑定的事件，同时传递参数

 //子组件
        var login = {
            template: "#login",
            data() {
                return {
                    name: "哈哈，我叫login子组件"
                }
            },
            methods: {
                //3.在子组件的方法中触发父组件传递过来的方法，从而给父组件传递数据
                sendMsg(){
                    this.$emit("funcd",this.name);
                }
            }
        }

二 、中央事件总线（eventBus）

第一步：创建中央事件总线（创建一个空的vue实例）

 var bus = new Vue();

第二步：使用bus.$emit发送数据

bus.$emit('sendFromLogin', "哈哈，我是login");

第三步：使用bus.$on来接收数据

 bus.$on("sendFromLogin", function (msg) {
                    console.log(msg)
                })

三 、provide和inject（父——>子）

第一步：通过provide向孩子们(孩子的孩子们)暴露数据

//父组件
var vm = new Vue({
            el: "#app",
            data: {},
            methods: {},
            components: {
                com1//子组件
            },
            //通过provide向孩子们(孩子的孩子们)暴露数据
            provide() {
                return {
                    msg:"来自父亲的东西"
                }
            }
        })

第二步：在孩子中通过inject来注入vm实例中暴露出来的数据

//子组件
var com1 = {
            template: "#tmpl",
            //在孩子中通过inject来注入vm实例中暴露出来的数据
            inject:['msg'],
        }

四 、ref / $refs

第一步：在要传递值的组件上使用ref=“值/名”标记

<div id="app">
        这是App组件
        <span ref="span">这是span</span>
        <login ref="log" :message="msg"></login>
    </div>
    <template id="login">
        <div>
            <h1>这是登陆组件</h1>
            <h4 ref="h4">{{name}}</h4>
        </div>
    </template>

 //子组件
    var login = {
        props: ['message'],
        template: "#login",
        data() {
            return {
              name:"哈哈，我叫login子组件"
            }
        },
        methods: {
        },
        mounted(){
          console.log("子组件",this.$refs.h4); //哈哈，我叫login子组件
          //获取到子组件的父亲中的span这个ref的引用 
          console.log("子组件",this.$parent.$refs.span); //这是span
        }
    }

第二步：在要获取值的组件中使用，类似于DOM中class、id的使用

//父组件
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "app组件的数据"
            },
            methods: {
            },
            mounted(){
                console.log(this.$refs.span);//这是span
                console.log(this.$refs.log.h4);//<h4 ref="h4">{{name}}</h4>
                console.log(this.$refs.log.$refs.h4);//哈哈，我叫login子组件
            },
            components: {
                login
            }
        })

五 、$children / $parent

六 、Vuex

[参考网址](https://blog.csdn.net/qq_38910842/article/details/103174870?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158443345419725222425702%2522%252C%2522scm%2522%253A%252220140713.130056874..%2522%257D&request_id=158443345419725222425702&biz_id=0&utm_source=distribute.pc_search_result.none-task)

七 、localStorage / sessionStorage

八 、$attrs与 $listeners