vue插槽,也就是子页面、父页面相互传值的另一写法
2023-12-02 03:18:47
父页面:
<template>
<div class="parent">
<p>父组件</p>
<child>
<div slot='s1'>
<p >插槽1</p>
<p >插槽101</p>
</div>
<p slot='s2'>插槽2</p>
<p slot-scope='props' slot='s3'>
{{props.text}}
</p>
</child>
</div>
</template>
<script>
import child from './child'
export default{
name:'parent',
data(){
return{
}
},
methods:{
},
components:{
child
}
}
</script>
<style>
</style>
子页面:
<template>
<div class="child">
子组件组件
<slot name='s1'></slot>
<hr />
<slot name='s2'></slot>
<slot>子页面自己玩</slot>
<slot name='s3' text='子页面传父页面'></slot>
</div>
</template>
<script>
export default{
name:'child',
data(){
return{
}
},
methods:{
}
}
</script>
<style>
</style>
最新文章
- 5.6 JS中基本包装类型
- Jquery Mobile示例
- three.js透视投影照相机
- IRaster、IRasterlayer、IRasterdataset之间的转换
- vuejs入门小demo-搜索大全
- 【转】简单理解socket
- dsoframer组件详细使用(aspx.net)
- HttpClient3.1 警告: Cookie rejected:
- iOS网络请求之---GET和POST
- AndroidStudio 使用Hide API
- 在windows系统中安装hadoop
- JAVA学习第三十六课(经常使用对象API)— Set集合:HashSet集合演示
- html-div-css
- Struts 之 通配符 路径匹配 常量用法 配置默认值
- TzObjectInspector 一例
- (十八)TableView实践(多组汽车品牌展示)
- 学习C++模板,类模板
- 根据NABCD原则完成的案例项目需求分析及其创新方法
- jquery的on()用法实例
- go里面的指针用法