slot の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• +Vue+slot へ行く。
• +Vue+slot の差分を削除

#author("2022-05-12T18:54:16+08:00","default:Admin","Admin")
#author("2022-05-14T09:37:04+08:00","default:Admin","Admin")
[[Vue]]

&color(red){※前提条件：本文基于 Vue 2.0 创作};
#contents

* slot [#z4c6fbbc]

插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。

由于插槽是一块模板，所以，对于任何一个组件，从模板种类的角度来分，其实都可以分为非插槽模板和插槽模板两大类。

- 非插槽模板指的是html模板，指的是‘div、span、ul、table’这些，非插槽模板的显示与隐藏以及怎样显示由插件自身控制；
- 插槽模板是slot，它是一个空壳子，因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置确由子组件自身决定，slot写在组件template的哪块，父组件传过来的模板将来就显示在哪块。

* slot-scope [#xf412aed]

&color(red){在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。};

取得作用域插槽:data绑定的数据，scope可以随便替换其他名称，只是定义对象来代表取得的data数据，用于使用而已。

 slot-scope="scope"

总的来说就是 scope-slot就是可以用子组件里面的数据, 可以操作子组件里面的数据.

而scope-slot后面接的内容就是个别名, 或者说变量也行, 是指向子组件里data():function里面的数据.

scope.row相当于一个{},{}里边都是数据；按理说，列表里的数据是要供给表单展示，列表中的每个{}都是结构一样的，或者理解为包含的数据项相同。
#codeprettify{{
<el-table :data="tableData"
  ... 省略 ...>
  <el-table-column prop="del_flg" label="标识">
    <template slot-scope="scope">
      \{\{ scope.row.end_flg == '1' ? 'Yes' : 'No' \}\}
    </template>
  </el-table-column>

... 省略 ...

data() {
   return {
     tableData: [{
       date: '2020-08-09',
       name: '张三',
       del_flg: 1
     },{
       date: '2021-06-07',
       name: '赵四',
       del_flg: 0
     },]
}}


#hr();
コメント：
#comment_kcaptcha