父子、非父子间的传参方式

// 父组件向子组件传参：
        // 在项目中 可能有好几个地方都用到这个功能(例如:表格 列表啊),写成一个组件就不用重复的粘贴复制了,
        // 这个功能需要的数据参数可能根据当前页面会变动,这时候父组件就可以向子组件传参(可以是字符串 数组等),然后在父组件的页面上显示的就是 得到数据或参数 展示的内容
            // 父组件：
            // html:
            <div class="home">
                <HelloWorld :newMsg="msg" /> 
                //绑定子组件newMsg(props值) = 父组件msg(data值)
            </div>
            // js:
            import HelloWorld from "@/components/HelloWorld.vue";
            export default {
                name: "Home",
                data(){
                     return{msg:'Welcome to Vue.js'} //父组件数据msg
                },
                components: {HelloWorld}
            };

            // 子组件：
            // html:
            <div>
                <h1>{{ newMsg }}</h1>  //直接调用newMsg，显示“Welcome to Vue.js”
            </div>  
            // js：
            export default {
                name: "HelloWorld",
                props: {newMsg: String}  //为子组件定义newMsg(props值)接收父组件msg
                //或者props:['newMsg']
            }      

// 子组件向父组件传参：
        // 子组件被修改(可修改类型) 修改后的内容可传给父组件 父组件接收再走接口等

        // 子组件：
        export default {
            name: "HelloWorld",
            data() {
                return {msg:"Welcome to Vue"} //data值，即将向上传递的值
            },
            created(){
                this.$emit('change',this.msg) //向上传递自定义事件change和data值。这里我调用created生命周期函数触发$emit()
            }
        };
        // 父组件：
        // html：
        <div class="home">
            <HelloWorld @change="handle" /> //监听到子组件传递来的事件并响应handle方法
            <span>{{newMsg}}</span>  //直接调用newMsg，显示“Welcome to Vue”
        </div>
        // js:
        import HelloWorld from "@/components/HelloWorld.vue";
        export default {
            name: "Home",
            data() {
                return {newMsg:""}
            },
            methods:{
                handle(msg){           //定义handle方法，将自动接收到的msg值给了自己的newMsg
                     this.newMsg = msg
                }
            },
            components: {HelloWorld}
        };

// 非父子组件传参

        // 第一种：
        //     创建一个公共的js，美其名曰：bus.js作为中间仓库来传值。
        //     bus.js
            import Vue from 'vue'
            export default new Vue()

            // A组件:
            // '$emit' 官网解释:  ---事件触发器
            <span>{{elementValue}}</span>
            <input type="button" value="点击触发" @click="elementByValue">

            // 引入公共的bus，来做为中间传达的工具
            import Bus from './bus.js'
            export default {
                data () {
                    return {
                        elementValue: 4
                    }
                },
                methods: {
                　　elementByValue: function () {
                    // 通过事件中心去发射'Assembly'自己命名的，方法，this.elementValue为传的参数。
                        Bus.$emit('Assembly', this.elementValue)
                    }
                }
            }

        // B组件:  
        //     通过$on方法来接受该方法以及传的参数
            <input type="button" value="点击触发" @click="getData">
            <span>{{name}}</span>

            import Bus from './bus.js'
            export default {
                data () {
                    return {
                        name: 0
                    }
                },
                mounted: function () {
                    var vm = this
                    // 用$on事件来接收参数   并且调用了在a组件中出发的方法
                    Bus.$on('Assembly', (data) => {
                        console.log(data)
                        vm.name = data
                    })
                },
                methods: {
                    getData: function () {
                        this.name++
                    }
                }
            }

 // 遇到的问题:
         // 如果A组件点击跳转B组件时传递值 bus.$emit()
　　　　　　　　setPath(){
              　　this.$router.push({
                　　path:'mine/collect',
            　　　})
       　　　　 },
         // 1.显示不到页面上
         // B组件created接受值 bus.$on()
         // B组件接收值可打印 但显示不到页面上？？
         // 当你从页面A到页面B跳转的时候，发生了什么？首先是B组件先created然后beforeMount接着A组件才被销毁，A组件才执行beforeDestory，以及destoryed.

 　　　　 // 也就是在A销毁之前，B组件的beforeCreate ，created，和beforeMount这三个钩子函数先触发，之后才是A组件的销毁钩子的触发，因为总线Bus要求要先有监听在触发，
13 　　　　　//　才能成功监听，所以我们只能在A组件的beforeDestroy或者destroyed这两个生命周期钩子中触发函数emit，
14 　　　　　//　同理也只能在B组中的beforeCreate，created，和beforeMount这三个钩子函数中监听on。
         // 所以，我们可以把A页面组件中的emit事件写在beforeDestory中去。因为这个时候，B页面组件已经被created了，也就是我们写的$on事件已经触发了
 
         // 所以可以在beforeDestory的时候，$emit事件。
 
         // 2.this指向
         // bus.$on()的时候，可以使用es6箭头函数,也可使用普通函数(注：使用普通回调函数需要重新定义this指向,否则内容接收到也显示不到页面上)

         // 3.多次触发 不销毁
　　　　　//　随着页面的切换 事件的触发还是会依次增加，控制台打印次数依次增加

         // 解决：就是说，这个$on事件是不会自动清楚销毁的，需要我们手动来销毁。
         // 所以在B组件页面中添加Bus.$off来关闭
         // // 在B组件页面中添加以下语句，在组件beforeDestory的时候销毁。
         // beforeDestroy () {
         //     bus.$off('get', this.myhandle)
         // }
         // 可以看此文章写的挺好的 https://www.jianshu.com/p/fde85549e3b0
          
         // 非父子传参第二种写法:
         // 可以不用新建bus.js,直接在main.js中添加创建一个bus， Vue.prototype.bus=new Vue();
         // 在非父子组件中用的时候 直接this.bus.$emit() this.bus.$on(),其余的都一样