vue中template中的scope到底是个什么？

在使用ElementUI组件开发项目，我们经常使用template中的作用域插槽，它的作用是在外部获取组件内的数据 ,这里是为了获取这一行的数据，我们让slot-scope值为scope，那么由scope.row就可以得到数据了。拿到这一行的数据，也就可以拿到这一行的id，如图所示：

 <template slot-scope="scope"><el-button type="primary" size="small" >分配权限</el-button><el-button type="success" size="small" @click="editHandler(scope.row)">编辑</el-button><el-button type="danger" size="small" @click="delHandler(scope.row)">删除</el-button></template>

那我们怎么验证呢？

错误示范：如果我们直接这么操作，很遗憾是不能在页面上铺出来的，而且可能页面上的数据也会丢失

<template slot-scope="scope">{{scope}}
</template>

所以啊，在这里我提供一个小方法，我们定义一个函数，让scope作为参数传递进来，这样我们就在控制台把它打印出来，代码如下：

正确示范：

 <template slot-scope="scope"><el-button  @click="fun(scope)">点我看看scope里是什么</el-button></template><script>
export default {methods:{fun(scope){console.log(scope)}}
}
</script>

快来试试吧

vue中template中的scope到底是个什么？相关推荐

Vue.js父与子组件之间传参父向子组件传参　　例子：App.vue为父，引入componetA组件之后，则可以在template中使用标签（注意驼峰写法要改成componet-a写法，因为ht
Vue.js父与子组件之间传参父向子组件传参例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对 ...
vue实例中template: App,这样写是什么意思
vue实例中template: '',这样写是什么意思官网的描述: 模板将会替换挂载的元素.挂载元素的内容都将被忽略也就是说:template: '' 表示用替换index.html里面的如果还 ...
Vue在表格中格式化时间
在获取数据的时候时间显示的方式是毫秒那么可以通过在Vue原型上过载一个时间的过滤器函数去格式化时间首先,找到main.js入口文件 Vue.filter('dataFormat',function ...
【vue】组件中的插槽
一.什么是插槽: <slot></slot> 插槽:预留的位置,父组件在使用时在组件标签中间写的内容,会填充到slot的位置即使用组件时,可以往插槽中传递内容二.插槽分类 ...
Vue项目开发中一些常见问题
问题汇总问题:安装超时(install timeout) 方案有这么些: cnpm : 国内对npm的镜像版本 /* cnpm website: https://npm.taobao.org/ */ ...
Vue为v-html中标签添加CSS样式
在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式: <template><div class="msgHtmlBox" v-htm ...
Vue CLI3.0 中使用jQuery 和 Bootstrap
Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Boo ...
怎样在vue单页面中引入其他组件
场景在一个vue的单页面,假如是home.vue中要引入其他组件的内容. 页面结构如下: 实现首先在components下新建组件Today_recommend.vue组件 <templat ...
vue 2.6 中 slot 的新用法
译者:前端小智原文:www.smashingmagazine.com/2019/07/usi- 为了保证的可读性,本文采用意译而非直译. 最近发布不久的Vue 2.6,使用插槽的语法变得更加简洁. ...

vue中template中的scope到底是个什么？

那我们怎么验证呢？

vue中template中的scope到底是个什么？相关推荐

最新文章

热门文章