关于vue slot,使用,传值,刷新等
1、子组件留插槽我是子组件,下面是留的插槽## 2、父组件填内容这里的写的都是slot的内容我是slot内容具名的slot,加上name即可我是填有名字的slot3、插槽传值子组件传值,属性形式传递row父组件接收通过props,获取对应的值{{props.row}}4、父组件刷新子组件4.1、父组件调用的时候给传递个属性值,比如timer需要刷新的时候,就改变timer的值,可使用时间戳time
·
1、子组件留插槽
<div>
我是子组件,下面是留的插槽
<slot></slot>
<slot name ="btntop"></slot>
</div>
2、父组件填内容
<son>
这里的写的都是slot的内容
<span>我是slot内容</span>
</son>
具名的slot,加上name即可
<son>
<span slot="btntop">我是填有名字的slot</span>
</son>
3、插槽传值
子组件传值,属性形式传递row
<slot name="btntop" :row="row"></slot>
父组件接收通过props,获取对应的值
<span slot="btntop" slot-scope="props">
{{props.row}}
</span>
4、父组件刷新子组件
4.1、父组件调用的时候给传递个属性值,比如timer
<son :timer="timer"></son>
需要刷新的时候,就改变timer的值,可使用时间戳
timer= new Date().getTime()
4.2、子组件里监听timer变更,去调用刷新对应数据
watch:{
timer:{
handler(val){
// 进行刷新操作
}
}
}
更多推荐
已为社区贡献6条内容
所有评论(0)