网站搜索引擎提交,wordpress发布站点,网站报价单模板,中建西部建设股份有限公司网站slot插槽 1、插槽 slot 的简单使用2、插槽分类2.1 默认插槽2.2 具名插槽2.3 作用域插槽 插槽就是子组件中的提供给父组件使用的一个占位符#xff0c;用slot/slot 表示#xff0c;父组件可以在这个占位符中填充任何模板代码#xff0c;如 HTML、组件等… slot插槽 1、插槽 slot 的简单使用2、插槽分类2.1 默认插槽2.2 具名插槽2.3 作用域插槽 插槽就是子组件中的提供给父组件使用的一个占位符用slot/slot 表示父组件可以在这个占位符中填充任何模板代码如 HTML、组件等填充的内容会替换子组件的标签。 简单理解就是子组件中留下个“坑”父组件可以使用指定内容来补“坑”。
1、插槽 slot 的简单使用
app.vue 文件引入 Son.vue 组件
templatediv idappapp componentSondiv classslot-contant插槽内容/div/Son/div
/templatescript
import Son from ./components/SlotComponents/Son
export default {name: App,components: { Son }
}
/scriptstyle
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;background: #4a90e2;color: #fff;padding: 20px;
}
.slot-contant {color: #f00;font-size: 16px;
}
/styleSon.vue文件内容
templatediv classson-componentson headerslot /son footer/div
/template
script
export default {}
/script
style scoped
.son-component {width: 200px;height: 200px;padding: 20px;background: #ccc;border: 1px solid #ccc;
}
/style页面展示效果
2、插槽分类
2.1 默认插槽
slot /2.2 具名插槽 Tips有名字的插槽子组件可以在多个地方插入不同内容
slot nameheader/slot
slot namefooter/slot!-- 父组件使用 --
template v-slot:header/template
template #footer/template
template #default/template举例说明父组件
templatediv idappapp componentSontemplate #headerp我是header部分/p/templatep我是main默认插槽部分/ptemplate v-slot:footerp我是footer部分/p/template/Son/div
/templatescript
import Son from ./components/SlotComponents/Son
export default {name: App,components: { Son }
}
/scriptstyle
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;background: #4a90e2;color: #fff;padding: 20px;
}
.slot-contant {color: #f00;font-size: 16px;
}
/styleSon.vue 子组件
templatediv classson-componentheaderslot nameheader/slot/headermainslot/slot/mainfooterslot namefooter/slot/footer/div
/template
script
export default {}
/script
style scoped
.son-component {width: 200px;height: 200px;padding: 20px;background: #ccc;border: 1px solid #ccc;
}
/style页面效果
2.3 作用域插槽 Tips插槽内容能够访问子组件中才有的数据
slot :msgmsg/slot!-- 父组件使用 --
template v-slot:defaultdatap{{ data.msg }}/p
/template
template v-slotdatap{{ data.msg }}/p
/template举例说明父组件
templatediv idappapp componentSontemplate v-slotdatap{{ data.msg }}/p/template/Son/div
/templatescript
import Son from ./components/SlotComponents/Son
export default {name: App,components: { Son }
}
/scriptstyle
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;background: #4a90e2;color: #fff;padding: 20px;
}
.slot-contant {color: #f00;font-size: 16px;
}
/styleSon.vue 子组件
templatediv classson-componentslot :msgmsg/slot/div
/template
script
export default {data() {return {msg: hello, i am son}}
}
/script
style scoped
.son-component {width: 200px;height: 200px;padding: 20px;background: #ccc;border: 1px solid #ccc;
}
/style页面效果
