Vue2，Vue3父传子，父传后代，子传父

本文已参与[新人创作礼]活动，一起开启掘金创作之路

一.Vue2 父传子

1.$ref

可用于组附件调用子组件的方法,Vue提供了refs来存储当前所有设置了ref属性的组件信息、

父给nb设置

<nb ref="cls"></nb>

父使用nb中的方法

   this.$refs.nb.方法

2.props

父组件传入属性，子组件通过props接收，this.XXX方式使用

父组件

<nb a='a'></nb>

子组件

props:{
  type: String,//[Number,String]
  default: '' ,
  required:true
}
//props:[]

注：props可设置为对象或者数组(不推荐数组),type设置传入类型,default设置默认值,required是否必传

3.父传后代

父使用provide传值，后代使用inject接收即可使用

父

<template>
<div>
  <Son></Son>
</div>
</template>

<script>
import Son  from './commpoent/Son.vue'
export default {
  name: 'App',
  components:{Son},    
provide(){
  return {
    app:'我是app'
  }
}
}
</script>

后代

<template>
<div>
  <h1>123==Son=={{app}}</h1>
</div>
</template>

<script>
export default {
  name: 'App',
    inject:['app']
       
}
</script>

二.Vu2 子传父

1.$emit

子组件$emit(事件名，传递的参数)向外弹出一个自定义事件, 在父组件中的属性监听事件，同时也能获取子组件传出来的参数

// 父组件
 <nb   @confirm="handleConfirm"></nb> 
// 子组件
 props: { 
   msg: { 
       type: String, default: '' 
     } 
   },
   data(){
     return {
        list:{...}
     }
   },
 methods：{
  handleEmitParent(){ 
    this.$emit('confirm', list)
   }
 }

2.子改父值

// 父组件
 <nb :confirm.sync='confirm'  @confirm="handleConfirm"></nb> 
     ...
    data(){
     return {
        confirm:{
                ...
             }
     }
   },
// 子组件
 props: { 
   confirm: { 
       type: Object, 
       default: ()=>{}//默认为对象 
     } 
   },
   data(){
     return {
        list:{
                ...
             }
     }
   },
 methods：{
 //触发该事件
  emitParent(){ 
   //修改
    this.$emit('update:confirm', list)
   }
 }

父组件使用:.sync表示允许子组件修改该变量

子组件使用 this.$emit('update:confirm', list)表示将该变量值改为list并提交给父组件

三. vue3 父子后代传参

1.父传子

注：此时使用子传父，需使用setup的第二个参数中的emit方法

2.父传后代

在vue3中使用父传后代，仅需在相应文件中注册provide或inject即可正常使用

3.新增父子传参方式v-model传参

vue3新增v-model父子传参方式(因vue2废弃此传参方式所以这里说新增)

使用方法

注：此时父组件中的val在子组件中在setup中使用props.modelValue属性调用，在dom中使用modelValue调用