[英]why can't child components get the data from parent component?
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'.我想将“allActions”解析为子组件。子组件是一个对话框,我通过控制“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.但是,我无法从父组件中获取“allActions”。 How can i get it?我怎么才能得到它?
When defining the attributes on an HTML element keep in mind that HTML is case insensitive.在定义 HTML 元素的属性时,请记住 HTML 不区分大小写。 So a prop defined as allBaseRules
really is seen as allbaserules
.所以定义为allBaseRules
的道具确实被视为allbaserules
。 So you need to use "Kabab-case" when defining the attribute name as below.因此,在定义属性名称时需要使用“Kabab-case”,如下所示。
<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. Vue 会自动识别 kabab-case 道具并为您将它们转换为 camelCase。 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 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/请参阅此处的示例https://jsfiddle.net/skribe/1dbfj8h6/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.