File upload

Upload – upload-list.vue: upload- index. Vue: upload- upload-list.vue: upload- index. To call the upload.vue rewrite upload via index.vue 1 in the upload-list.vue $emit(‘retry’) 2. In the index. In the vue

retry () {
this.$refs['upload-inner'].upload(file.raw)
}
Copy the code

Upload-inner is the dom name given to index.vue when the upload.vue is rendered. Child A emits the event to parent B using emit, and then parent B sends the event to child B using ref

Form the table

Ele list source code is really complicated! It looks like you’re using Vuex to pass data, and there’s a tableStore object, but it’s not, it’s just an object, to manage all sorts of data for three generations

<y-table>
<y-table-column></y-table-column>
</y-table>
Copy the code

Created, Mounted,…. (created, mounted,….) YTableColumn is dependent on YTable, so YTableColumn must have a slot in YTable to distribute content

jsx

Ele source code uses JSX syntax, so configure.babelrc, then install transform-vue-jsx plugin

{
  "presets": [["env", { "modules": false}]."stage-3"]."plugins": ["transform-vue-jsx"]}Copy the code

render(h) + jsx

With the JSX plugin installed, you can happily render

Type: (createElement: () => VNode) => VNode string template alternative, allowing you to maximize the programming power of JavaScript. The render function takes a createElement method as the first argument to create a VNode. If the component is a function component, the render function also receives an additional context parameter to provide context information for the function component that has no instance. If the render function is present in the Vue option, the Vue constructor does not compile the render function from the HTML template option or from the mount element specified by the EL option. BeforeMount: Called before the mount begins: The related render function is called for the first time.Copy the code

Render (h) {this._l(this.data, (row, $index) => []) _l = renderCell; _l refers to renderList method)

Scoped slot

JSX is used instead of template. The template method cannot pass scoped slot. Components nested components need to pass scopedSlot. Scoped slot is a special type of slot introduced in Vue 2.1. Used to replace rendered elements with a reusable template that can pass data to. Scoped Slot is used to customize the template in the slot and use the context passed by the component. This greatly increases the flexibility of component development. For example, on the official website:

Also throughthis.$scopedSlots Accesses the scope slots to get a function that returns VNodes: props: ['message'].render: function (createElement) {
  // `<div><slot :text="message"></slot></div>`
  return createElement('div'[this.$scopedSlots.default({
      text: this.message
    })
  ])
}
Copy the code

Reason 2: Render allows you to get the best out of JavaScript. JSX’s Babel plugin for using JSX syntax in Vue takes us back to more template-like syntax. To sum up, it is easy to use and improves coding ability

There is a question

Properties written to a component will still exist after the component is rendered?

<table-body
          :store="store"
          :style2="{ width: bodyWidth }">
        </table-body>
Copy the code

Father and son

table.vue
...
Copy the code
Table () {return this.$parent; },Copy the code

Implementation of internal code

table.vue
<div class="el-table">
      <div class="hidden-columns" ref="hiddenColumns"><slot></slot></div>// table-column is placed in slot<table-body></table-body>// The internal parent instance includes columns, which render its own data by manipulating columns</div>
Copy the code

To be continued…