重庆网站设计总部,什么是社交电商平台,大观网站建设,利用淘宝视频服务做视频网站本次主要针对vue中父子组件传参所进行讲解
一、vue2和vue3父传子区别
1.vue2的父传子
1).在父组件子标签中自定义一个属性
sonPage :子组件接收到的类名传输的数据子组件/sonPage
2).在子组件中peops属性中拿到自定属性
props: {子组件接收的…本次主要针对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父组件传递的参数/sonpage
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来进行数据传输 以上便是本次的分享如有问题可以评论或私信
