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);

    }



  • 相关阅读:
    顺序栈的基本操作(C语言)
    简单加密-维吉尼亚
    单链表的反转
    单链表的排序
    SVN信息泄露漏洞
    SQLi-labs Page-2_Less-21---Less-28a
    dedecms 任意密码重置 验证凭证回传
    ThinkCMF缓存Getshell
    ThinkCMF X2.2.0多处SQL注入漏洞
    SQLi-LABS Page-4(Challenges)
  • 原文地址:https://www.cnblogs.com/youaremysunshine19961002/p/11805987.html
Copyright © 2011-2022 走看看