• vue中父子组件通信的坑


    转自:https://www.cnblogs.com/goloving/p/8660407.html

    当在一个组件中,使用了其他自定义组件时,就会利用子组件的属性和事件来和父组件进行数据交流。

    父子组件之间的通信就是 props down,   events up,父组件通过 属性props向下传递数据给子组件,子组件通过事件 events 给父组件发送消息

    子组件需要某个数据时,就在内部定义一个prop属性,父组件就像给HTML元素指定特定值一样,把自己的data属性传递给子组件的这个属性。

    而子组件内部发生什么事情的时候,就通过自定义事件来把这个事情涉及到的数据暴露出来,供父组件处理。

    <my-component v-bind:foo="baz"  v-on:event="doThis(arg1,...arg2)"></my-component>  

    以上代码中,foo是 <my-component> 组件内部定义的prop属性,baz 是父组件的一个data属性,event是子组件定义的一个事件,doThis是父组件的一个方法。

        父组件把baz数据通过prop传递给子组件的foo

        子组件内部得到foo的值,就可以进行相应的操作;

        当子组件内部发生了一些变化,希望父组件能知道时,就利用代码触发event-a事件,把一些数据发送出去;

        父组件把这个事件处理器绑定为doThis方法,子组件发送的数据,就作为doThis方法的参数被传进来;

        然后父组件就可以根据这些数据,进行相应的操作。

  • 相关阅读:
    CSS去掉 a 标签点击后出现的虚线框
    AMD 和 CMD的区别
    sublime text常用快捷键
    jsonp详解
    JSON详解
    JS知识总结
    input 单选按钮radio 取消选中(转载)
    koala 编译scss不支持中文解决方案
    Spring事务的传播行为 @Transactional(转)
    Ubuntu下JDK+Tomcat+MySql环境的搭建
  • 原文地址:https://www.cnblogs.com/150536FBB/p/11290472.html
Copyright © 2020-2023  润新知