首页 > 其他 > 详细

vue 动态组件的传值

时间:2019-09-17 10:37:34      阅读:96      评论:0      收藏:0      [点我收藏+]

vue项目开发中会用到大量的父子组件传值,也会用到动态组件的传值,常规子组件获取父组件的传值时,第一次是获取不到的,这时候有两种解决方案

第一种:

父组件向子组件传的是一个json对象,ES6的方法Object.keys() 转化成数组,再判断数组的长度。如果传的是数组,直接判断长度就行

<!--父组件动态内容区域-->
<component :is="currentView" :clientDetails="clientDetails" v-if="Object.keys(clientDetails).length > 0"></component>

 

第二种:

第二种方法是子组件监听处理

<!--父组件动态内容区域-->
<component :is="currentView" :clientDetails="clientDetails"></component>
技术分享图片
<!--子组件监听-->
watch: { clientDetails(newVal){ this.expandDetail = newVal; console.log(this.expandDetail); } },
技术分享图片

注::is="currentView"是用来控制动态组件的,currentView的值改变会使用不同的子组件

贴一段项目中用到的代码

// 左侧菜单切换
handleChangeMenu (code) {
    this.currentView = code
},
技术分享图片
components:{
    expand: () => import(‘../groups/expand‘),
    certificates: () => import(‘../groups/certificates‘),
    contacts: () => import(‘../groups/contacts‘),
    addressview: () => import(‘../groups/addressview‘),
    credit: () => import(‘../groups/credit‘)
}
技术分享图片

vue 动态组件的传值

原文:https://www.cnblogs.com/hellofangfang/p/11531464.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!