1.父向子传值(:prop="prop")

• 子组件内，props 定义变量，
• 在子组件内，使用 props里面定义的变量
• 父组件内，使用子组件，属性方式给 props 变量传值

父传子：父组件传值

<template>
  <div>
    <p>我是父组件</p>
    <!-- 3.使用子组件 -->
    <Son :msg="msg"></Son>
  </div>
</template>

<script>
// 1.引入子组件 Son 
import Son from './components/Son.vue'
export default {
  // 2.注册子组件
  components:{
    Son
  },
  data() {
    return {
      // ◆准备 父传子 的值
      msg:'儿子你好！'
    }
  }
}
</script>

父传子:子组件接收

<template>
    <div>
        <p>我是子组件,收到父组件的消息：{{msg}}</p>
    </div>
</template>

<script>
export default {
    // ◆接收 父传子 的值
    // props 接收可以是数组(简单类型) 也可以是对象(复杂数据类型)
    // props:['msg'],
    props:{
        msg:{
            type:String,
            default:''
        }
    }
}
</script>

2.子向父传值（this.$emit）

• 父组件内, 给子组件绑定自定义事件： @自定义事件="父methods函数"
• 子组件内, 恰当时机触发该事件，this.$emit('自定义事件名', 值)
• 父组件内，收到数据后，在 methods 里面处理对应的业务

子传父：子组件传值

<template>
    <div>
        <p>我是子组件<button @click="fn">按钮</button></p>
    </div>
</template>

<script>
export default {
    data(){
        return {
            sayHi:'爸爸，你好'
        }
    },
    methods:{
        fn(){
            this.$emit('sonHandler', this.sayHi)
        }
        
    }
}
</script>

子传父：父组件接收

<template>
  <div>
    <p>我是父组件,收到子组件的消息：{{message}}</p>
    <!-- 3.使用子组件 -->
    <Son @sonHandler="sonHandlerFn"></Son>
  </div>
</template>

<script>
// 1.引入子组件 Son 
import Son from './components/Son.vue'
export default {
  // 2.注册子组件
  components:{
    Son
  },
  data(){
    return {
      message:''
    }
  },
  methods:{
    sonHandlerFn(payload){
      this.message=payload
    }
  }
}
</script>

3.跨组件传值（EventBus）

• 创建EventBus/index.js，引入空白Vue对象，并导出
• 双方组件都引入空白 Vue 对象(EventBus)
• 接收方，在 created 里面，eventBus.$on('事件名'，(值)=>{函数体})
• 传值方，在 methods 里面，eventBus.$emit('事件名'，值)

创建空白对象--EventBus/index.js

// ◆此举用于跨组件通信
// 1.引入空白 vue 对象
import Vue from 'vue'
// 2.导出空白 vue 对象
export default new Vue()

传值方：在 methods 里面eventBus.$emit('事件名'，实参)

<template>
    <div>
        <p>我是哥哥组件</p>
        <input @blur="sisterAgeHandler" type="text" v-model.number="sisterAge" placeholder="请输入妹妹的年龄">
    </div>
</template>

<script>
//◆导入 eventBus 
import eventBus from '@/EventBus'
export default {
    data(){
        return {
            sisterAge:''
        }
    },
    methods:{
        // ◆跨组件传值-传
        sisterAgeHandler(){
            eventBus.$emit('blur',this.sisterAge)
        }
    }
}
</script>

接收方：在 created 里面eventBus.$on('事件名'，（形参）=>{})

<template>
    <div>
        <p>我是妹妹组件,哥哥说我今年{{myAge}}岁了</p>
    </div>
</template>

<script>
//◆导入 eventBus 
import eventBus from '@/EventBus'
export default {
    data(){
        return {
            myAge:''
        }
    },
    created(){
        // ◆跨组件传值-收
        eventBus.$on('blur',(age)=>{
            this.myAge=age
        })
    }
}
</script>

父组件：导入两个不相关的子组件

<template>
  <div >
    <!-- 3.1使用 Brother 组件 -->
    <Brother ></Brother>
    <hr>
    <!-- 3.2使用 Sister 组件 -->
    <Sister></Sister>
  </div>
</template>

<script>
// ◆1.引入子组件 Brother 和 Sister
import Brother from './components/Brother'
import Sister from './components/Sister'
export default {
  name: 'VueFamilyApp',
  // ◆2.注册子组件
  components:{
    Brother,
    Sister
  },
}
</script>

4.双向传值（this.$refs 和 this.$parent）

父传子：this.$refs

<template>
  <div>
    <p>我是父组件,儿子说我叫 {{name}}</p>
     <input v-model="sonAge" type="text" placeholder="请输入儿子的年龄" @blur="sonAgeHandler">
     <hr>
    <!-- 3.使用子组件 Son -->
    <Son ref="sonRef"></Son>
  </div>
</template>

<script>
// 1.引入子组件 Son 
import Son from './components/Son.vue'
export default {
  // 2.注册子组件 Son
  components:{
    Son
  },
  data(){
    return{
      sonAge:'',
      name:''
    }
  },
  methods:{
  async sonAgeHandler(){
     // 父传子，通过 this.$refs 直接更改子组件的 age 值
      await this.$nextTick(()=>{
        this.$refs.sonRef.age=this.sonAge
      })
    }
  }
}
</script>

子传父：this.$parent

<template>
    <div>
        <p>我是子组件,爸爸说我今年{{age}}岁了</p>
        <input v-model="fatherName" type="text" placeholder="请输入爸爸的姓名" @blur="fatherNameHandler">
    </div>
</template>

<script>
export default {
    data(){
        return{
            age:20,
            fatherName:''
        }
    },
    methods:{
        // 子传父，通过 this.$parent 直接更改父组件的 name 值
        fatherNameHandler(){
           this.$parent.name=this.fatherName
        }
    }
}
</script>

5.父向子子孙孙传值 （provide 和 inject）

父组件：provide（键，值）

<template>
  <div>
    <p>我是父组件</p>
    <!-- 3.使用子组件 Son -->
    <Son></Son>
  </div>
</template>

<script>
// 1.引入子组件 Son 
import Son from './components/Son.vue'
export default {
  // 2.注册子组件 Son
  components:{
    Son
  },
  // ◆准备要传给子孙的东西
  provide:{
    rootMsg:'金元宝'
  }
}
</script>

子组件：inject:['键']

<template>
    <div>
        <p>我是子组件,我收到了爸爸的：{{rootMsg}}</p>
        <!-- 使用子组件 Sun -->
        <Sun></Sun>
    </div>
</template>

<script>
// 导入子组件 Sun
import Sun from './Sun.vue'
export default {
    // 注册 Sun 组件
    components:{
        Sun
    },
    // ◆接收爸爸给我的东西
    inject:['rootMsg']
}
</script>

孙组件：inject:['键']

<template>
    <div>
        <p>我是孙组件,我收到了爷爷的：{{rootMsg}}</p>
    </div>
</template>

<script>
export default {
    // ◆接收爷爷给我的东西
    inject:['rootMsg']
}
</script>