Scope slots in vue -- understanding (slot-scope)

The project uses elementUI, and the complexTable.vue in its official demo has the following code:

I don't understand slot-scope very well, and I didn't read it in detail when I was learning Vue. Now that it is used, it must be learned. Personal understanding is as follows:

There are three types of slots in vue: single slot, named slot, and scoped slot, which can be seen on the official website

(https://cn.vuejs.org/v2/guide/components.html#single slot)

The scope slot is simply that the parent component only displays the style, and the data is provided by the child component. For example, in the above code, the template in el-table-column is the display content passed to its internal solt, but the value of scope is returned by the data bound by the internal solt of el-table-column. What exactly this data is is specified in el-table-column, similar to:

<slot name="**" :data="data"></slot>
 export default {
    data: function(){
      return {
        data: ['1','2','3','4','5','6']
      }
    },
}

The scope is the data in the above code.

Here is a well written article:

https://segmentfault.com/a/1190000012996217

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324518855&siteId=291194637