码迷,mamicode.com
首页 > 其他好文 > 详细

vue组件之间通信

时间:2019-11-06 16:58:56      阅读:118      评论:0      收藏:0      [点我收藏+]

标签:rop   one   通信   fun   console   style   and   数据   自定义   

一:父 ==> 子, 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);

}



vue组件之间通信

标签:rop   one   通信   fun   console   style   and   数据   自定义   

原文地址:https://www.cnblogs.com/youaremysunshine19961002/p/11805987.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!