zoukankan      html  css  js  c++  java
  • vue组件传值

    组件的传值(组件之间的通讯)

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

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

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

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

      方法2:作用域插槽

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

      方法2:手动封装$on $emit $off(原理应用了观察者模式) 

      方法3:EventBus

      方法4:vuex

  • 相关阅读:
    .net 操作XML小结
    Oracle 10g RAC的负载均衡配置
    数据仓库建模与ETL实践技巧
    Red Hat Linux的分区
    用C#实现MVC(Model View Control)模式介绍
    SQL SERVER 日期函数大全
    ORACLE RAC工作原理
    NVARCHAR ,VARCHAR,NCHAR,CHAR区别
    SQLserver中用convert函数转换日期格式
    Linux之远程登录和文件传输
  • 原文地址:https://www.cnblogs.com/Leslie-Cheung1584304774/p/10576829.html
Copyright © 2011-2022 走看看