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

    }



  • 相关阅读:
    DataWhale《零基础入门数据挖掘》第二次打卡
    成功解决socket.timeout: The read operation timed out问题
    Pandas函数set_option()学习笔记
    [打卡]动手学深度学习第四次打卡
    [打卡]动手学深度学习第三次打卡
    [深度学习]动手学深度学习笔记-15
    [深度学习]动手学深度学习笔记-14
    [深度学习]动手学深度学习笔记-13
    [深度学习]动手学深度学习笔记-12
    jsp标准标签库——jstl
  • 原文地址:https://www.cnblogs.com/youaremysunshine19961002/p/11805987.html
Copyright © 2011-2022 走看看