Vue - slot-scope=“scope“ 的意义

Vue - slot-scope=“scope” 的意义

<template slot-scope="scope">
	<el-button type="primary" size="small" @click="$router.push(`/categories/edit/${scope.row._id}`)">编辑</el-button>    <!-- $router.push()  跳转页面 -->
	<el-button type="primary" size="small" @click="remove(scope.row._id)">删除</el-button> 
</template>

slot-scope="scope "取得 作用域插槽 :data绑定的数据
scope 可以随便替换其他名称, 只是定义对象 来代表取得的data数据 便于使用;

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 2.6.0+ 版本中,`slot-scope` 被废弃了,用 `v-slot` 代替。`v-slot` 是 Vue.js 2.6.0+ 新增的语法糖,用于替代之前版本中的 `slot-scope`。 `v-slot` 用于在组件中定义插槽,并且可以将插槽内部的数据传递给子组件。使用 `v-slot` 可以让组件的语法更加简洁易懂,同时也可以提高组件的可维护性和可复用性。 在使用 `v-slot` 的时候,需要在组件内部使用 `<slot>` 标签定义插槽,并且给定一个名字。在父组件中使用 `v-slot` 指令定义与子组件中同名的插槽,并且将插槽内部的数据绑定到父组件中的数据中。 例如,以下代码使用了 `v-slot` 替代了 `slot-scope`: ``` <template> <div> <child-component> <template v-slot:default="slotProps"> <span>{{ slotProps.text }}</span> </template> </child-component> </div> </template> ``` 在上面的代码中,`<child-component>` 是一个子组件,它定义了一个名为 `default` 的插槽。在父组件中,使用 `v-slot` 指令来定义与子组件中同名的插槽,并且将插槽内部的数据 `slotProps.text` 绑定到了父组件中的数据中。 需要注意的是,在使用 `v-slot` 的时候,如果只是简单的传递数据,可以使用 `v-slot:default` 的简写形式 `#default`,如下所示: ``` <template> <div> <child-component> <span #default="slotProps">{{ slotProps.text }}</span> </child-component> </div> </template> ``` 这样可以让代码更加简洁易懂。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值