vue 动态组件的传值
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 动态组件的传值的更多相关文章
- Vue动态组件
前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...
- vue父子组件之间传值
vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...
- vue父子组件的传值总结
久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. ...
- Vue父子组件相互传值及调用方法的方案
Vue父子组件相互传值及调用方法的方案 一.调用方法: 1.父组件调用子组件方法: 2.子组件调用父组件方法: 参考:https://www.cnblogs.com/jin-zhe/p/9523782 ...
- vue 循环加载动态组件以及传值
今天遇到一个需求,某个页面是个动态页面,由多个子组件构成. 之前我们的做法是将N个需要的组件import进主页面,然后引用一下即可.但是现在遇到的问题是, 这个动态页面存在多个业务,有的业务需要某几个 ...
- vue 动态组件、父子组件传参
1.vue中的自定义属性并获得属性的值 自定义属性::data-id语法为 :data-属性 获取属性的值:ev.target.dataset.id 2.vue父子组件传值 3.动态组件使用
- vue动态组件切换(选项卡)
vue的动态组件 <template :is='变量'></template> 可以通过改变变量,来改变template的替换内容.达到选项卡的功能 如果想要切换保持不重新创建 ...
- Vue 动态组件、动画、插件
1 动态组件 ①简单来说: 就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示. ②动态切换: 在挂载点使用component标签,然后使用v-bind:is=”组件名 ...
- Vue之组件间传值
标签: Vue Vue之父子组件传值 父向子传递通过props 子向父传递通过$emit 演示地址 代码示例如下: <!DOCTYPE html> <html lang=" ...
随机推荐
- TP6文档-邓士鹏
2019年5月11日 - 教程为您提供<ThinkPHP6.0极速入门(视频教程)>之 TP6的目录结构 章节的在线实战教程供您学习,你可以进行笔记.提问.讨论和资料下载 https:// ...
- Debian 10 xfce 错误提示 ACCESS DENIED
闲来无事重新安装自己的服务器发现很多关于Debian的初始安装问题都已经陌生了在此重新整理下自己安装所遇到的问题: ACCESS DENIED 释: 登录成功拒绝Root密码访问 解决方法: loc ...
- PHP0014:PHP操作文件
查看源代码 用这种方式抓取网页,和原始网页一模一样. 数组不能用echo 将一个网页保存到本地html文件
- Dictionary的基本用法
1.创建泛型哈希表,然后加入元素 Dictionary<string,string> openWith=new Dictionary<string, string>(); op ...
- JavaScript语法规则+JavaScript数据类型
JavaScript: ECMAScript + BOM +DOM javascript 标识符命名规则: 1.只能是字母.数字.下划线.$ 2.不能以数字开头 3.不能使用关键字和保留字 省略var ...
- jQuery---offset方法和position方法
offset方法和position方法 获取元素的相对于document的位置 //获取元素的相对于document的位置 $(".son").offset(); console. ...
- Mac下maven安装
1.下载路径:https://maven.apache.org/download.cgi 要想查看历史版本:则点击archives. 点击binaries 就可以下载对应的maven. Binary ...
- (jsp+servlet+javabean )MVC架构
MVC是三个单词的缩写,这三个单词分别为:模型.视图和控制. 使用的MVC的目的:在于将M和V的实现代码分离,从而使同一个程序可以使用不同的表现形式.比如Windows系统资源管理器文件夹内容的显示方 ...
- jquery form表单赋值封装
;!(function ($) { $.fn.setFormValue = function (options) { var $this = $(this); $.each(options, func ...
- 剑指offer 14. 链表中倒数第 k 个结点
14. 链表中倒数第 k 个结点 题目描述 输入一个链表,输出该链表中倒数第k个结点 法一:快慢指针 快指针先走 k 步,等快指针到达尾部时,慢指针所指结点即是倒数第 k 个结点 public cla ...