zoukankan      html  css  js  c++  java
  • 浅谈Vue中组件传值的几种方式

    Vue中传值主要分为两部分
    父子通信
        1.父传子
        传递:当子组件在父组件中当做标签使用的时候,通过给子组件绑定一个自定义属性,值为需要传递的数据
          接收:在子组件内部通过props进行接收
                接收的方式有2种 一种是数组接收  另一种是对象接收
                一般情况下我们都使用对象进行接收,因为对象接收可以校验数据的类型
                例子
                  props:["val"];
                  props:{
                    val:String
                  }
        2.子传父
          传递:当子组件给父组件传递数据的时候,通过调用父组件给子组件绑定的自定义事件,然后将值传递过去
          接收:父组件通过自定义事件的函数来接收子组件传递过来的数据(注意这个自定义方法的函数在绑定的时候不需要加())
          (2)、作用域插槽 
        带参数的插槽
              反向传值
                将子组件的数据传递给父组件,只需要给组件内部的slot绑定一个自定义属性
                在父组件中,子组件标签的内部书写一个template标签,通过scpoe来接收子组件传递过来的数据
    非父子
          1、在vue的原型身上添加一个公共的vue实例,组件之间调用这个公共的实例的$on/$emit来传递数据  传递的一方调用
            $emit  接收值的一方调用$on;
          2、手动封装$on $emit $off--->原理应用了观察者模式
          3、EventBus
          4、vuex
  • 相关阅读:
    BZOJ3752 : Hack
    XIV Open Cup named after E.V. Pankratiev. GP of SPb
    XIII Open Cup named after E.V. Pankratiev. GP of Ukraine
    BZOJ2087 : [Poi2010]Sheep
    BZOJ2080 : [Poi2010]Railway
    BZOJ2082 : [Poi2010]Divine divisor
    Moscow Pre-Finals Workshop 2016. National Taiwan U Selection
    XIII Open Cup named after E.V. Pankratiev. GP of Asia and South Caucasus
    XIII Open Cup named after E.V. Pankratiev. GP of Azov Sea
    XIII Open Cup named after E.V. Pankratiev. GP of SPb
  • 原文地址:https://www.cnblogs.com/qhya/p/10584312.html
Copyright © 2011-2022 走看看