why can't child components get the data from parent component?

Question

I disunderstood the documentation of passing parent component to child component.The parent component as the follow code:

<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>

I want to parse "allActions" to child components.The child components is a dialog,I open it by control the 'dialogFormVisible'. The child components like this:

  <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>

However,I can't get 'allActions' from parent component. How can i get it?

Answer 1

When defining the attributes on an HTML element keep in mind that HTML is case insensitive. So a prop defined as allBaseRules really is seen as allbaserules . So you need to use "Kabab-case" when defining the attribute name as below.

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

Vue automatically recognizes the kabab-case props and converts them to camelCase for you. So you are fine to still receive the props as you are currently.

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

See the the example here https://jsfiddle.net/skribe/1dbfj8h6/