vue组件数据传递

组件数据传递：

父传子：
利用props：

    Student组件：
        <script>
        export default {
            name:"Student",
            data() {
                return {
                    msg:"一个学生"
                }
            },
            props:['name' , 'sex' ,'age' ]
        }
        </script>

        // 接收同时对类型限制
    props:{
        name:String,
        sex:String,
        age:Number
    }
  最完整的 一般不用
        props:{
        name:{
            type:String,   //限制类型
            required:true   //限制name是必要的
        },
        age:{
            type:Number,
            default:99    //默认值
        },
        sex:{
            type:'string',

        }
    }

    App.vue  组件：  在里面传数据 ，类似于属性
        <template>
          <div>
            <Student  name='张三' sex='男' age=18></Student>
          </div> 
        </template>
         
header组件传递到list组件里面：  添加

兄弟组件之间的数据传递：
    方式一：利用App组件：  初级方法

        app到list
            数据写在   
            App组件里面，通过父传子的方法，props传递到接收数据的那个list组件
            list组件用props方法接收

        子传父 ：
            传数据的组件
          父组件先定义一个函数方法1，传给子组件，
          子组件用props得到方法，
          通过这个方法函数，设置函数方法参数，来传递

 props  里面的数据VBUN改变 
 props：[ 里面的东西是不可以修改的]

如果 let obj ={a:1,b:2}
        obj.a = 3    修改了了 但是vue监测不到
        obj = {a:4,b:5}   vue能监测

 

2，全局事件总线：
   
   一种组件间的通信的方式 适用于任意·组件间的通信，

app组件  包含 a,b,c,d 三个组件

   在app外部有一个全局事件  x ，如果a组件想要收到别的组件给的数据，在a组件里面给x绑定自定义事件 命名demo，因为是在x里面绑定的自定义事件，那么demo事件的回调是在a组件里面的， 然后d组件要传数据给a组件，就可以在d组件里面调用x 上面的  demo事件同时也可以传数据，

 x 需要满足条件  
 1，所有组件都能沟通到   
 2  ，能调用$on,$off,$emit  这些api

一个重要的内置关系 :通过这个关系可以让组件实例对象vc访问到vue原型的属性，方法

     VueComponent.prototype.__proto === Vue.prototype

        把x放在vue的原型对象上面，最好。

关于Vuecomponent的：组价件的本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的，每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！

在main.js里面

//创建vm
new Vue({
    el:'#app',
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this //安装全局事件总线      
    },
})

 
 在，要接收数据的组件绑定 全局事件总线事件，、
     mounted() {
            // console.log('School',this)
            this.$bus.$on('hello',(data)=>{
                console.log('我是School组件，收到了数据',data)
            })
        },
    beforeDestroy() {
        this.$bus.$off('hello“)
    },
 
   在传数据的组件触发事件
        methods: {
            sendStudentName(){
                this.$bus.$emit('hello',this.name)
            }
        },

3，消息的订阅与发布     也是任意组件间通信
    1，订阅消息 ：消息名
    2，发布消息 ： 消息内容

app组件里面有a,b,c,d 四个组件，其中，c组件在b组件里面,
c组件数据想在a组件里面使用，，a想要数据，c发出数据
那么在a组件订阅消息demo，设为test函数，
在c组件发消息demo，带着数据data，那么在c中发出消息demo，a中的test函数触发调用，data就去，
需要用到第三方库，原生的vue没有

    1，安装第三方库  可以用 npm i pubsub-js
    2, 在组件里面引入：import pubsub from 'pubsub-js'
    3，接收数据，a组件接收数据，就在a组件里面订阅消息，订阅的回调就在a组件里面，
       methods:{
       demo(data){..}
       }
       .....
       mounted(){
       订阅消息
       this.pId = pubsub.subscribe("xxx",this.demo)
       }
       xxx是消息名
     4，提供数据，发布消息，

     pubsub.publish('xxx',数据)
     5，最好取消 一下订阅，在beforedestroy 里面
      beforeDestroy() {
            pubsub.unsubscribe(this.pubId)
         },
用全局事件总线更好，消息订阅要用到第三方库

school组件  ，，要收数据

    mounted() {
            // pubsub是对象，上面有方法，挂载完毕，
            // 订阅消息   
            // 消息取名hello，之后有组件发布hello消息，执行后面的回调
            this.pubId = pubsub.subscribe("hello",( msgName,data)=>{
                console.log('hello消息发布,并执行', msgName,data)
            })
            // 解决this指向不清问题，也可以定义一个方法methods放在vue里面管，在这里调用
        },
         beforeDestroy() {
            pubsub.unsubscribe(this.pubId)
         },
    }
student组件：   要传数据出去
methods: {
            sendStudentName( ){
                // 发布消息hello，带数据666
                // msgName,是消息名，data是参数
             pubsub.publish("hello",666)
            }
        },