vue父子组件传参

一、常用的父和子传参

父传子

父组件

// 父组件里的子组件
<LesseeDialog ref="lesseeDialog" :paramsObj="defaultProps" @dialogDetermine="whichDetermine"></LesseeDialog>

// 引入子组件
import LesseeDialog from './component/lesseeDialog.vue';
export default {
    components: { LesseeDialog },
    data() {
        // 弹窗默认传参
        defaultProps: {}
    }
}

    // 父组件操作子组件的事件
    handleLessee(value, whichLessee='') {
      switch (value) {
        case 'create':
            // 给传给子组件的参数对象赋值
          this.defaultProps = {
            title: '创建租户',
            index: '',
            id: '',
            name: '',
            person: '',
            text: ''
          };
          break;
        default:
          break;
      }
       // 让子组件显示
      this.$refs.lesseeDialog.dialogVisible = true;
    },

子组件

export default {
  props:{
    // 接收父组件传过来的参数
    paramsObj:{
      type: Object,
      default:() => {}
    }
  },
},

要用数据的话就直接paramsObj.xxx就行了

子传父

子组件

this.$emit('事件名', 参数);

this.$emit('dialogDetermine', this.paramsObj);

父组件

在父组件中的子组件部分@事件名="事件"，事件名是子组件emit里的事件名，事件就是父组件里的一个事件

<LesseeDialog ref="lesseeDialog" :paramsObj="defaultProps" @dialogDetermine="whichDetermine"></LesseeDialog>