Question

我不理解将父组件传递给子组件的文档。父组件如下所示：

<template>
    <div className="fixed-table">
        <basic-container>
            <el-table
                    :data="dataSource"
                    border
                    style="width: 100%">
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" round @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <edit-dialog ref="editDialog" :row="scope.row" :index="scope.$index" :allBaseRules="allBaseRules" :allActions="allActions"></edit-dialog>
                    </template>
                </el-table-column>
            </el-table>
        </basic-container>
    </div>
</template>

<script>
    import BasicContainer from '@vue-materials/basic-container';
    import EditDialog from "./components/EditDialog";
    import HttpUtils from '../../../../components/HttpUtils.js'

    export default {
        components: {
            BasicContainer,
            EditDialog
        },
        name: 'FixedTable',
        data() {
            return {
                dataSource: [],
                allActions: [],
            };
        },
        methods: {
            handleEdit(index, row) {
                this.$refs.editDialog.$emit("open",row);
            }
        },
        mounted() {
            let self = this;
            HttpUtils.get('/api/rule/action/queryAll')
                    .then(function (response) {
                        self.allActions = response.data.data;
                    })
                    .catch(function (error) {
                    });
        }
    }
</script>

我想将“ allActions”解析为子组件。子组件是一个对话框，我通过控制“ dialogFormVisible”将其打开。子组件如下：

  <template>
    <el-dialog title="编辑业务规则" :visible.sync="dialogFormVisible" :append-to-body="true">
        <el-form :model="formRow" :label-position="labelPosition" label-width="20%">

            <el-form-item label="前置行为" prop="preHandlers">
                <el-select v-model="preHandler" clearable placeholder="请选择">
                    <el-option v-for="item in allActions" :key="item.actionID" :label="item.actionName"
                               :value="item.actionID"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit('ruleForm')">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        data() {
            return {
                dialogFormVisible: false
                preHandler: ""
            };
        },
        computed: {
            formRow() {
                return Object.assign({}, this.row);
            }
        },
        props: {
            row: {
                type: Object,
                default: {}
            },
            index: {
                type: Number,
                default: 0
            }
            allActions: {
                type: Array,
                default: function () {
                    return []
                }
            }
        },
        created: function () {
            this.$on('open', function (row) {
                this.dialogFormVisible = true
            });
        }
    };
</script>

但是，我无法从父组件中获取“ allActions”。我怎么得到它？

Answer 1

在HTML元素上定义属性时，请记住HTML不区分大小写。因此，定义为allBaseRules的道具实际上被视为allbaserules。因此，在定义属性名称时，您需要使用“ Kabab-case”。

<edit-dialog 
  ref="editDialog" 
  :row="scope.row" 
  :index="scope.$index" 
  :all-base-rules="allBaseRules" 
  :all-actions="allActions"
 >

Vue自动识别kabab案例道具，并为您将其转换为camelCase。因此，您仍然可以像现在一样收到道具。

https://vuejs.org/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case

在此处查看示例https://jsfiddle.net/skribe/1dbfj8h6/

为什么子组件不能从父组件获取数据？

1 个答案: