liang14658fox

Appearance

1. 参数命名规范——组件传参 ​

  1. 发送方（父组件）
  • com + Params + _tosend
html
<son :comParams_receive="comParams_tosend"></son>
<son :comParams_receive="comParams_tosend"></son>
js
comParams_tosend
export default {
    data() {
        return {
            comParams_tosend:{
                xxx:'xxx',
                ...
            }
        }
    }
}
comParams_tosend
export default {
    data() {
        return {
            comParams_tosend:{
                xxx:'xxx',
                ...
            }
        }
    }
}
  1. 接收方（子组件）使用
  • com + Params + _receive
js
comParams_receive
export default {
    props:{
        comParams_receive: Object
    },
    created() {
        console.log(this.comParams_receive)
    },
}
comParams_receive
export default {
    props:{
        comParams_receive: Object
    },
    created() {
        console.log(this.comParams_receive)
    },
}

2. 参数命名规范——路由传参 ​

  1. 发送方
  • router + Params + _tosend
js
routerParams_tosend
this.$router.push({
    path:'地址',
    query:{
        routerParams_receive: JSON.stringify(routerParams_tosend)
    }
})
routerParams_tosend
this.$router.push({
    path:'地址',
    query:{
        routerParams_receive: JSON.stringify(routerParams_tosend)
    }
})
  1. 接收方使用
  • router + Params + _receive
js
routerParams_receive
export default {
    data() {
        return{
            routerParams_receive: null,
        }
    },
    created() {
        this.routerParams_receive = JSON.parse(this.$route.query.routerParams_receive)
    },
}
routerParams_receive
export default {
    data() {
        return{
            routerParams_receive: null,
        }
    },
    created() {
        this.routerParams_receive = JSON.parse(this.$route.query.routerParams_receive)
    },
}

3. 参数命名规范——dialog ​

  • dialog + Visible + _目的

  • dialog + Title + _目的

js
this.dialogVisible_purpose //dialog显隐
this.dialogTitle_purpose // dialog标题
this.dialogVisible_purpose //dialog显隐
this.dialogTitle_purpose // dialog标题

4. 参数命名规范——loading ​

  • button + Loading + _目的

  • table + Loading + _目的

js
this.tableLoading_purpose // 表格loading
this.buttonLoading_purpose // 按钮loading
this.tableLoading_purpose // 表格loading
this.buttonLoading_purpose // 按钮loading

5. 参数命名规范——提交表单参数 ​

  • form + Params + _表单目的
js
formParams_purpose
let formParams_purpose = { // formParams_表单目的
    xxx:'xxx',
    ...
}
formParams_purpose
let formParams_purpose = { // formParams_表单目的
    xxx:'xxx',
    ...
}

6. 参数命名规范——表格数据 ​

  • table + Data + _表格目的
js
tableData_purpose
this.tableData_purpose = [ // tableData_表格目的
    {
        xxx:'xxx',
        xxx
    },
]
tableData_purpose
this.tableData_purpose = [ // tableData_表格目的
    {
        xxx:'xxx',
        xxx
    },
]