Column goal
Under the control of the joint technology stack of vue and element UI, this column provides effective source code examples and information point introductions for flexible use.
(1) Provide some basic operations of vue2: installation, reference, template use, computed, watch, life cycle (beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed, activated, deactivated, errorCaptured, components,), $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else ,v-else-if, v-on, v-pre, v-cloak, v-once, v-model, v-html, v-text, keep-alive, slot-scope, filters, v-bind,. stop, .native, directives, mixin, render, internationalization, Vue Router, etc.
(2) -cascader, el-input-number, el-switch, el-slider, el-time-picker, el-date-picker, el-upload, el-rate, el-color-picker, el-transfer, el-form , el-table, el-tree, el-pagination, el-badge, el-avatar, el-skeleton, el-empty, el-descriptions, el-result, el-statistic, el-alert, v-loading, $ message, $alert, $prompt, $confirm , $notify, el-breadcrumb, el-page-header, el-tabs, el-dropdown, el-steps, el-dialog, el-tooltip, el-popover, el- popconfirm, el-card, el-carousel, el-collapse, el-timeline, el-divider, el-calendar, el-image, el-backtop，v-infinite-scroll， el-drawer等
Contents of this article
Demand background
When a vue subcomponent uses $emit to pass a value to the parent component, it can pass one parameter or multiple parameters. So how does the parent component set up to obtain the data passed by the subcomponent? There are two methods here. For specific information, please refer to the following information.
Pass a parameter:
子组件：
submit(){
this.$emit('submit',this.name)
}
父组件：
<foods @submit="handelFoods"></foods>
父组件的方法中接收参数：
handelFoods(e) {
console.log(e)
}
Pass multiple parameters
method one:
子组件：
submit(){
this.$emit('submit',this.meat,this.vegetable)
}
父组件：
<foods @submit="handelFoods(arguments)"></foods>
父组件的方法中接收参数：
handelFoods(e) {
// e[0]：第一个参数 e[1] 第二个参数
console.log(e[0],e[1])
}
Method Two:
子组件：
submit(){
this.$emit('submit',this.meat,this.vegetable)
}
父组件：
<foods @submit="handelFoods"></foods>
handelFoods(e1,e2) {
// e1：第一个参数 e2 第二个参数
console.log(e1,e2)
}