vue2与vue3中父子组件传参的区别

本次主要针对vue中父子组件传参所进行讲解

一、vue2和vue3父传子区别

1.vue2的父传子

1).在父组件子标签中自定义一个属性

<sonPage :子组件接收到的类名="传输的数据">子组件</sonPage>

2).在子组件中peops属性中拿到自定属性

props: {
    子组件接收的名字: [Number],//设置数据的默认类型
    default: () => {
        return {
            // 填写默认值
        }
    }
}

2.vue3的父传子

1).在父组件子标签中自定义一个属性

与vue2不同的是，这里有两种方式

一种是与vue2方式相同

<son-page :子组件接收到的类名="传输的数据"></son-page>

另一种是直接使用v-bind

<son-page v-bind="父组件传递的参数"></son=page>

2).子组件通过defineProps接收

//通过数组方式接收参数，这里的msg和abc是父组件传过来的参数名
const foo = defineProps(['msg'])

//通过对象方式接收参数1
const foo = defineProps({
  //可设置接收类型
  msg: [Number,String]
})

//通过对象方式接收参数2
const foo = defineProps({
  msg:{
    //对象形式不仅可设置接收类型，还可以设置默认值
    type:[Number,String],
    //必须传此参数，否则报错                               
    required:true
  }，
  //可接收多个数据类型
  abc: [Number]
})

// 通过 foo.参数名 进行渲染

注意：

其中包含了一个required属性，放值为true时必须传此参数，否则会报错

3.区别

1).发送数据

vue3在vue2的基础上多了一种发送数据的方式

2).接收数据

在vue2中是使用props来进行接收父组件传输的数据；

在vue3中则是使用defineProps来进行接收

二、vue2和vue3子传父区别

1.vue2的子传父

1).在父组件子标签中自定义一个事件(方法里面有一个参数用来接收子组件的传值)

<sonPage @父组件接收数据的方法="子组件发送参数的方法"></sonPage>

2).在子组件中this.$emit('自定义事件的名字',传递的数据)

2.vue3的子传父

1).在父组件子标签中自定义一个事件(与vue2相同)

2).子组件发送数据

与vue2不同的是，这里也有两种方式进行发送数据

一种是通过defineEmits发送

//通过defineEmits
const emit = defineEmits(['fromSon'])

function fromSon() {
  emit('fromSon',参数)
}

另一种是直接在点击事件写

//直接在子组件标签传参
<button @click='$emit("fromSon",{参数})'>fromSon</button>

3.区别

1).父组件接收数据(没有区别)

2).子组件发送数据

vue2中发送通过this.$emit进行传输数据

vue3中可直接通过$emit进行传输数据；也可以通过defineEmits来进行数据传输

以上便是本次的分享，如有问题，可以评论或私信