vue 的 element ui 问题,<template>...</template> 的作用是什么?

vue 的 element ui 问题,《template》…《/template》的作用是什么?

<el-table-column label="操作">
    <el-button
    size="mini"
    type="primary"
    @click="">详情</el-button>
    <el-button
    size="mini"
    @click="">编辑</el-button>
    <el-button
    size="mini"
    type="danger"
    @click="">删除</el-button>
</el-table-column>

<el-table-column label="操作">
    <template slot-scope="scope">
        <el-button
        size="mini"
        type="primary"
        @click="">详情</el-button>
        <el-button
        size="mini"
        @click="">编辑</el-button>
        <el-button
        size="mini"
        type="danger"
        @click="">删除</el-button>
    </template>
</el-table-column>

上面的两段代码在转换为 html 后,没有区别啊?
这个 的作用是啥呀?
请大家指点下我,非常感谢!

最佳答案

这个标签可以帮我们包裹一些元素,而不会被渲染在页面中,减少层级嵌套

3年前 评论
HEPING (楼主) 3年前
讨论数量: 3

这个标签可以帮我们包裹一些元素,而不会被渲染在页面中,减少层级嵌套

3年前 评论
HEPING (楼主) 3年前

我的理解是可以包任何你想放的一些代码块,template 就作为了代码块的最外层边界标签

假如我们有这样的代码

<div class="container">
  <div v-if="true">
    <h1>标题1</h1>
    <p>内容1</p>
  </div>
  <div v-else>
    <h1>标题2</h1>
    <p>内容2</p>
  </div>
</div>

最后渲染的结果就是

<div class="container">
  <div>
    <h1>标题1</h1>
    <p>内容1</p>
  </div>
</div>

但是感觉里面的这个 div 又没什么作用,反而多嵌套了一层,而我们只需要 h1 和 p 就好,这时我们把里面的这个 div 换成 template

<template v-if="true">
  <h1>标题1</h1>
  <p>内容1</p>
</template>
<template v-else>
  <h1>标题2</h1>
  <p>内容2</p>
</template>

最后得到的结果就是只有 h1 和 p

<div class="container">
  <h1>标题1</h1>
  <p>内容1</p>
</div>

再如上面 ElementUI 中,我们想要放三个按钮,如果不使用 scope 数据,那么加 template 和不加没有什么区别

否则就需要使用一个标签包裹着三个按钮,加上 slot-scope="scope",这样三个按钮就都可以使用 scope.row 来使用当前行数据。

如果使用非 template 标签元素包裹,那么这个标签元素也会被渲染,而使用了 template,那么最后就会减少一层标签嵌套

不知道我的表达是否清楚,一起讨论

3年前 评论
HEPING (楼主) 3年前

不用template怎么把当前行的数据传到方法里呢

3年前 评论
HEPING (楼主) 3年前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!