zoukankan      html  css  js  c++  java
  • vue 组件传值的方式及方法

    父子通信
       1. 父传子
          传递:当子组件在父组件中当做标签使用的时候,通过给子组件绑定一个自定义属性,值为需要传递的数据
          接收:在子组件内部通过props进行接收
                接收的方式有2种 一种是数组接收  另一种是对象接收
                一般情况下我们都使用对象进行接收,因为对象接收可以校验数据的类型

                例子
                  props:["val"];
                  props:{
                    val:String
                  }



       2. 子传父
          传递:当子组件给父组件传递数据的时候,通过调用父组件给子组件绑定的自定义事件,然后将值传递过去

          接收:父组件通过自定义事件的函数来接收子组件传递过来的数据(注意这个自定义方法的函数在绑定的时候不需要加())

                 

      3.非父子
          1、在vue的原型身上添加一个公共的vue实例,组件之间调用这个公共的实例的$on/$emit来传递数据  传递的一方调用
            $emit  接收值的一方调用$on;

          2、手动封装$on $emit $off--->原理应用了观察者模式

          3、EventBus

          4、vuex

  • 相关阅读:
    bzoj4554: [Tjoi2016&Heoi2016]游戏
    bzoj3166: [Heoi2013]Alo
    luogu3398 仓鼠找sugar
    bzoj3261: 最大异或和
    bzoj3446: [Usaco2014 Feb]Cow Decathlon
    BZOJ1742[Usaco2005 nov]Grazing on the Run 边跑边吃草
    bzoj2750: [HAOI2012]Road
    bzoj4448: [Scoi2015]情报传递
    bzoj2809: [Apio2012]dispatching
    bzoj 1452
  • 原文地址:https://www.cnblogs.com/zhouyingying/p/10567448.html
Copyright © 2011-2022 走看看