Vue父子组件传值(复杂数据类型的值)

时间: 2019-08-12阅读: 44标签: 组件

vue 父子组件传值是很常见的,多数情况下都是父传递给子的值是基础数据类型,如string,number,boolean,当父组件值被修改时,子组件能够实时的作出改变。如果父子传值的类型是复杂数据类型(object,array)这种时


1.通常的做法是在子组件监听props属性

<!--父组件-->
<div class="parent">
    <!--子组件-->
    <child :val="val"></child>
</div>

<script>
    export default {
       data(){
            return {
                val:{
                      name:'name',
                      age:'18'
                } 
           }
    }
    }
</script>
<! 子组件监听props>
<div class="child">
   {{val.name +":"+ val.age}}
</div>

<script>
    export default {
       props:'val',
       data(){ return {}},
     watch:{
       val:{
          handle(newVal){
              console.log(newVal)
           },
          deep:true
        }
     }
    }

</script>

细节点:这里监听到父组件的值被修改时,不要在回调里再对此值做修改操作,否则提示报错,并进入死循环导致浏览器gg


2.还有一种做法是在父组件修改,避免进坑,官方文档有说明:https://cn.vuejs.org/v2/guide/list.html#数组更新检测


链接: http://www.fly63.com/article/detial/4643

使用Typescript装饰器来劫持React组件

装饰器是一种特殊类型的声明,它能够被附加到类声明,方法, 访问符,属性或参数上。 装饰器使用 @expression这种形式,expression求值后必须为一个函数,它会在运行时被调用,被装饰的声明信息做为参数传入。

深入理解React中的setState

组件的状态是一种保存、处理和使用给定组件内部信息的方法,并允许你实现其自身的逻辑。状态本身其实是JavaScript中一个简单的对象(Plain Old Java[Script] Object),并且改变它是使组件重新进行渲染的几种方法之一

Vue子父组件方法互调

讲干货,不啰嗦,大家在做vue开发过程中经常遇到父组件需要调用子组件方法或者子组件需要调用父组件的方法的情况,现做一下总结,希望对大家有所帮助。设置子组件的ref

react totast组件开发

最近在主导有jquery类型转react技术栈-- 项目库中引入antd-mobile,但是由于totast组件不能满足要求...自己前端封装一个。分什么技术栈,全是垃圾,真正掌握基础

小程序自定义actionSheet组件

在微信小程序中,针对操作菜单的需求,官方文档提供了相应的api,如下图所示。但是小程序自带的操作菜单没有 “标题” 这么一个参数,不能在操作菜单的顶部显示自定义的标题

记录一次优雅的管理Vue全局组件自动注册和插件自动引入

随着项目的不断变大,可能有些人会把插件的引入和全局组件的注册都放到main.js中,导致后面main.js里面一大坨引入代码,看起来杂乱无比,也不利于后期进行维护,所以我们尽可能的让main.js看起来整洁些

使用vue.js的动态组件模板

组件并不总是具有相同的结构。有时需要管理许多不同的状态(注:指的是根据不同状态显示不同组件)。异步加载组件对此操作很有帮助。在 Scrumpy 中组件用于提醒、评论和附件等多个地方。

vue实现一个全局Message组件

不知道大家在用一些UI框架,比如Element-ui的时候,有没有觉得一些全局组件。this.$message(),this.Toast()等,用起来很爽。他们不像其他的组件,需要去导入,去注册。麻烦的很。

vue中8种组件通信方式

vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢?首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式

可靠React组件设计的7个准则之组合和复用

此篇文章对编写可重用和可维护的React组件非常有帮助。但因为篇幅实在太长,我对文章进行了分割,本篇文章重点阐述 组合和复用。因水平有限,文中部分翻译可能不够准确,如果你有更好的想法

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全