父子，子父，非父子组件通信

父子组件通信

父亲的数据给子集

父组件向子组件传值

1. 子组件在props中创建一个属性，用于接收父组件传过来的值；

2. 父组件 引入子组件-->注册子组件-->引用子组件；

3. 在子组件标签中添加子组件props中创建的属性；

4. 将所要传递的值赋值给该属性。

props：

1. prop类型：通常你希望每个prop都有指定的数据类型，你可以以对象的形式列出prop，对象的属性的名称和值分别对应了prop的值和类型。

2. 单向数据流：所有的prop都使得其父子prop形成一个单向数据流，即单向下数据流。父级prop的更新会单向流动到子组件中，但是反过来则不行，单向数据流能防止子组件意外改变父组件的状态。额外的，每次父组件发生改变时，子组件中的prop将会更新为最新的值。

• 子组件通过props选项来接收属性，接收到的属性可以像全局变量一样在组件的模板中使用

props: ['aa']

• 属性验证  - js是弱类型语言

 props: {
       'aa': Number // String Boolean Object Array 
       }

• vue3.0使用ts,ts是强类型

  <div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
      <!-- 使用单项数据绑定将一个数据绑定给一个自定义的属性 -->
      <Son :aa = "money" />
    </div>
  </template>
  <template id="son">
    <div>
      <p>老爸给了我 {{ aa }} 块 </p>
      <p> {{ aa + 20 }}  </p>
    </div>
  </template>
  
<script>
  Vue.component('Father',{
    template: '#father',
    data () {
      return {
        money: 4000
      }
    }
  })
  Vue.component('Son',{
    template: '#son',
    /* 子组件通过props选项来接收属性，接收到的属性可以像全局变量一样在组件的模板中使用 */
    // props: ['aa']
    /* 属性验证  - js是弱类型语言*/
    props: {
      // 'aa': Number // String Boolean Object Array 
      'aa': {
        validator ( val ) {
          return val > 3000
        }
      }
      /* vue3.0使用ts,ts是强类型 */
    }
  })
  new Vue({
    el: '#app'
  })
</script>

子父组件通信

子的数据给父亲

子组件向父组件传值

1. 子组件需要以某种方式，例如点击事件的方法来触发一个自定义事件

2. 将所需要传递的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法

3. 父组件 引入子组件-->注册子组件-->引用子组件

4. 在子组件标签上绑定对自定事件的监听

自定义事件

1. 父组件通过$on监听事件，事件处理函数的参数则为接收的数据

2. 子组件通过$emit可以触发事件，第一个参数为要触发的事件，第二个事件为要传递的数据

3. sync修饰符：对一个 prop 进行双向绑定

<div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
      <p> 儿子给我发了 {{ xiaojinku }} 的红包 </p>
      <!-- 自定义事件 -->
      <Son @hongbao = "get"/>
    </div>
  </template>
  <template id="son">
    <div>
      <button @click = "give"> 发红包 </button>
    </div>
  </template>
</body>

<script>
  Vue.component('Father',{
    template: '#father',
    data () {
      return {
        xiaojinku: 0
      }
    },
    methods: {
      get ( val ) {
        this.xiaojinku = val
      }
    }
  })
  Vue.component('Son',{
    template: '#son',
    data () {
      return {
        hongbao: 2000
      }
    },
    methods: {
      give () {
        this.$emit('hongbao',this.hongbao)
      }
    }
  })
  new Vue({
    el: '#app'
  })
</script>

非父子组件通信（兄弟姐妹通信）

兄弟通信 找父作为中间值
子传父->父传子

<div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
      <h3> father组件 </h3>
      <hr>
      <!-- 使用自定义属性形式将一个方法传递给子组件 -->
      <Girl></Girl>
      <hr>
      <Son></Son>
    </div>
  </template>
  <template id="son">
    <div>
      <h3> son组件 </h3>
      <img v-if = "flag" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3872048339,4140466773&fm=26&gp=0.jpg" alt="">
      <img v-else src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2438534582,3797477605&fm=26&gp=0.jpg" alt="">
    </div>
  </template>
  <template id="girl">
    <div>
      <h3> girl组件 </h3>
      <button @click = "hit"> 揍弟弟 </button>
    </div>
  </template>
</body>

<script>
  /* 定义了实例bus - bus上有 $on  $emit  */
  var bus = new Vue()
  Vue.component('Father',{
    template: '#father',
  })
  Vue.component('Son',{
    template: '#son',
    /* 组件是独立的，自己的数据自己改 */
    data () {
      return {
        flag: true 
      }
    },
    mounted () {
      /* mounted表示挂载结束，也就是我们能看到界面了，也就是事情做完了 */
      /* 这个函数会自动执行 */
      var _this = this 
      /* 通过bus绑定了自定义事件 */
      bus.$on('ku',function () {
        _this.flag = !_this.flag 
      })
    }
  })
  Vue.component('Girl',{
    template: '#girl',
    methods: {
      hit () {
        bus.$emit('ku')
      }
    }
  })
  new Vue({
    el: '#app'
  })