zoukankan      html  css  js  c++  java
  • vue组件之间通信

    一:父 ==> 子, props
    1:props 类型

    props: {

                num: {

                type: Number,
                default: 0
                },
                str: {
                type: String,
                default: ''
                },
                bool: {
                type: Boolean,
                default: false
                },
                arr: {
                type: Array,
                default: () => {
                return []
                }
                },
                fun: {
                type: Function,
                default: () => () => {}
                },
                obj: {
                type: Object,
                default: () => {
                return {}
                }
                }

    }

    2:定义子组件,然后在父组件里面引入使用

    import childs from '../../../components/childs/childs'

    <childs :obj="obj" str="fff"></childs>
    3:父组件 data 定义一个数据,冒号为动态传值

    obj: {
              name: 'name',
              age: 18
    }


    二:子 ==> 父,$emit
    1:子组件里面,methods 定义一个方法

    handleSuccess () {
          // 子 ==> 父 组件通信,数据自定义
         this.$emit('toParent', this.list);
      }
    }
    2:父组件里面引用使用,methods 定义一个方法
    import childs from '../../../components/childs/childs'

    <childs @toParent="toParent"></childs>

    toParent (arr) {

      console.log(arr);

    }



  • 相关阅读:
    保持比例图像缩放简易算法
    ASP.Net中自定义Http处理及应用之HttpModule篇
    用于ASP.NET2.0的进度条控件(实时)
    VS2008SP1下jQuery使用初体验
    qau国庆七天乐——A
    现在的信息科学是泡沫吗?
    dp入门问题
    day09 10 11 12 三天函数内容
    day08文件操作
    day02五大运算符:逻辑运算符、成员运算符、算数、比较、赋值、
  • 原文地址:https://www.cnblogs.com/youaremysunshine19961002/p/11805987.html
Copyright © 2011-2022 走看看