VUE父子组件传值

关键词：props,$emit

父传子：

在父组件显示的位置：

<wareHouse-detail :isVisible="visible"></wareHouse-detail>
//visible 是父组件 data 数据，isVisible 是子组件的内容

在子组件接收数据：

//props 接收数据，声明类型
 props: {
            isVisible: Boolean
        },

//data 绑定为子组件的数据
 data() {
            return {
                isShow: this.isVisible,
            }
        },

// 监听父组件传参变化重新赋值
 watch: {
            isVisible(val) {
                this.isShow = val;
            }
        },

子传父：

在子组件发送方法和数据：

// 在方法中，用 vm.$emit( event, arg ) 发送方法和数据
cancel() {
              this.$emit('closed', this.isShow);
          },
rowClick(record, index) {
               return {
                   on: {
                       dblclick: (e) => {
                           this.$emit('closed', this.isShow);
                       },
                   }
               };
           },
//上述两个发送，看不懂的话，参考第一个即可，第二个只是一个组件里面的方法格式，起到发送数据效果的就只有  this.$emit('closed', this.isShow) 

在父组件接收方法和数据：

// closed 是子组件自己的方法，closeModal 是父组件方法
<wareHouse-detail @closed='closeModal'></wareHouse-detail>

// closeModal 是绑定过来的父组件方法，val 是由子组件发送来的值 this.Show  
// 上一步的方法绑定过程中不需要带值。@closed(val)='closeModal(val)' 是错误的！
 closeModal(val) {
                this.visible = false;
                console.log(val)
            },