Vue组件之间通信

组件：

 全局：Vue.component{'Home',home}
 局部：components：{ Home }  组件内使用

回顾：
组件通信

< div> 
   < home>  < /home> 
< /div>

---

父子通信：父 --> 子 / 子 --> 父

---

父 --> 子 ( 通信 )

 (子组件)
  let child = {
  template: '...',
    props: ['propa','propb']
  }

 (父组件)
  let Home = {
    template: '
    < div>
        < child propa="值" propb="值"> < /child>
        < hr>
        // 动态绑定 :propa 相当于 v-bind
        < child :propa="aaa">< /child>
    < /div>
    `,
    data(){
      return {
        aaa: '123456789'
      }
    },
    // 局部挂载 child
    components: {
      child,
    }
  }

  let vm = new Vue({
    el: '#app',
    components: {
      Home,
    }
  })

子 --> 父 ( 通信 )

(子组件) 
  let child = {
    template:'
    < button @click='自定义事件1'>子传父数据< /button>
    ',
    methods:{
      自定义事件1(msg){
        this.$emit('自定义事件2', 携带参数),
      }
    },
  }

  (父组件)
  let Home = {
    template: '
    < div>
      <子组件的名字(child) @自定义事件2="fn" />
    < /div>
    ',
    methods: {
      fn(msg){  // 自定义事件emit时，携带的参数
        this.msg = msg
      }
    },
    components: {
      child,
    }
  }

// props验证
props
类型验证 （props数据类型）
必传验证
默认值

let 组件 = {
   props: {
   	 // number类型验证
     propa: Number,
     // 多类型验证
     propb: [String,Number],
     propc: {
       type: String,
       // 必传验证
       required:true
     },
     propd:{
       type:Number,
       default: '我是一个默认值'
     },
     arr:{
			type: Array,
			default: ()=> [1,2,3,4]
     },
     obj:{
       type:object,
       default:()=>{
         x:x;
         x:x;
       }
     },
     template:'
		< div>
			{{ propsa }}
			{{ propsb }}
			--
			{{ propsc }}
			{{ propd }}
			< ul>
				< li v-for="item in arr" :key="item">
					{{ item }}
				< /li>
       		< /ul>
		< /div>
   ',
   }
 }

兄弟组件通信：

事件中心总线 eventBus
const eventBus = new Vue()

 // 第一个兄弟元素
    const brother1 = {
      template: `
        <div>
          第一个兄弟组件
          <button @click='aaa'>点击传给下一个兄弟数据</button>
        </div>
      `,
      methods:{
        aaa(){
          eventBus.$emit("事件名",携带参数)
        }
      }

    // 第二个兄弟元素
    const brother2 = {
      template: `
        <div>
          第二个兄弟组件
          {{ msg }}
        </div>
      `,
      mouted(){
        eventBus.$on("事件名",回调函数)
        /* 
          eventBus.$on('bbb',(msg)=>{
          alert("传输成功" + msg)
          this.msg = msg
        }) */
      }

    const Home = {
      template: `
      <div>
        父组件
        <brother1></brother1>
        <brother2></brother2>
      </div>
      `,

      // 局部挂载
      components: {
        brother1,brother2
      }
    }

其他三种通信：

ref 绑定到组件自定义标签  this.$refs.xxx 获取就是 这个子组件实例
  ref 通信：
    // 头部组件
    const CommonHead = {
      template:'
        < div>
          我是头部组件
        < /div>
      ',
   }
   
   // 父组件
    const Home = {
      template: '
        < div>
          Home组件
          < common-head ref="child">  < /common-head>
        < /div>
      ',
	components: {
		CommonHead
	},
	data () {
		return {
			msg: '我是home组件中data中的数据'
		}
	},
	mounted(){
		console.log(this.$refs.child) // 输出的是 实例 			
		const child = this.$refs.child;
		setTimeout(()=>{
			child.changeMsg();
		},2000)
	}	
  }
  
  // 全局挂载
	Vue.component('Home',Home)
    const vm = new Vue({
      el: '#app'
    })

**
其他两种：不常用

$parent $children

provide inject

**