关于vue的slot-scope

slot-scope是vue2.10新增的一个作用域插槽,vue官网可以找的到,我就不贴链接了。
我平时主要的用法是配合elementUI里的table组件来使用,感觉很方便
以下是两个例子:

<el-table>
  <el-table-column label="测试" >
     <template slot-scope="scope" prop="testType">
      //prop可以接收接口的参数,例如这个testType是后端传给你的用来选择状态的参数,就可以这样用
        <span v-if="scope.row.testType==0" >会议进行中</span>
        <span v-if="scope.row.testType==1" >会议准备中</span>
        <span v-if="scope.row.testType==2" >会议结束</span>
     </template>
  </el-table-column>
</el-table>

也可以这样用

<el-table-column label="弹出框">
  <template slot-scope="scope">
     <el-button @click="testBtn(scope.row)">查看弹框</el-button>
这个scope.row是当前表格一行的所有数据,例如 scope.row.id就可以拿到后端传过来的id,然后把这个id传给后端,用来操作这一行(例如各种点击事件)
  </template>
</el-table-column>

export default{
  data(){},
methods:{
  testBtn(item){
  let val = {
    id= item.id
  这个id,就是后端所需要你传的参数,从上面的点击事件中传过来
  }
  }
}
Vueslot-scope是一个用于在父组件中传递数据给子组件的特殊属性。它允许你在父组件中定义一个插槽,并将数据传递给子组件来使用。 使用slot-scope的一般步骤如下: 1. 在父组件中定义一个插槽,并使用slot-scope属性指定一个变量名。例如: ```html <template> <div> <slot :item="item"></slot> </div> </template> ``` 在这个例子中,我们使用:item="item"将变量item传递给插槽。 2. 在子组件中使用插槽,并在插槽的内容中使用slot-scope指定的变量名。例如: ```html <template> <div> <slot-scope="props"> <p>{{ props.item }}</p> </slot-scope> </div> </template> ``` 在这个例子中,我们使用slot-scope="props"将传递给插槽的变量名设置为props,并在插槽的内容中使用props.item来访问传递的数据。 3. 在父组件中使用子组件,并在子组件标签中传递数据给插槽。例如: ```html <template> <div> <child-component> <template v-slot:item="{ item }"> <p>{{ item }}</p> </template> </child-component> </div> </template> ``` 在这个例子中,我们使用v-slot:item="{ item }"将插槽中的变量名设置为item,并在插槽的内容中使用item来访问传递给子组件的数据。 通过使用slot-scope,我们可以在父组件中传递任意类型的数据给子组件,并在子组件中使用这些数据进行渲染或其他操作。这种机制为组件之间的数据交互提供了一种灵活且强大的方式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值