[Vue @Component] Pass Props to Vue Functional Templates
Vue to Component functional Props pass templates
2023-09-14 09:00:50 时间
Functional templates allow you to create components consisting of only the template
tag and exposing the props
passed into the template with the props
object off of the template context. This approach allows you to build simple configurable templates without having to write any backing code.
From the code in previous post:
<template> <Settings > <Layout slot-scope="props"> <header slot='header' class='p-2 bg-blue text-white'>{{props.header}}</header> <div slot="content" class="flex-grow p-3">Amazing content</div> <h2 slot="footer" class="bg-grey-light text-blue p-2 text-center">{{props.footer}}</h2> </Layout> </Settings> </template> <script> import {Component, Prop, Vue} from 'vue-property-decorator' import Layout from './Layout'; import Settings from './Settings'; @Component({ components: { Layout, Settings } })
We create two functional template component 'Header' and 'Footer':
<!-- components/Heade.vuer --> <template functional> <header slot='header' class='p-2 bg-blue text-white'>{{props.header}}</header> </template>
<!-- components/Footer.vue --> <template functional> <h2 slot="footer" class="bg-grey-light text-blue p-2 text-center">{{props.footer}}</h2> </template>
Functional template works pretty much like React functional component:
const header = props => <header>{{props.header}}</header>
Just in Vue, you just need to add 'functional' directive to the <template>, don't need to add any js code.
exports those componets in components/index.js file:
export { default as Header } from "./Header" export { default as Footer } from "./Footer"
Using those component to refactor the code:
<template> <Settings > <Layout slot-scope="{header, footer}"> <Header :header="header"></Header> <div slot="content" class="flex-grow p-3">Amazing content</div> <Footer :footer="footer"></Footer> </Layout> </Settings> </template> <script> import {Component, Prop, Vue} from 'vue-property-decorator' import Layout from './Layout'; import Settings from './Settings'; import {Header, Footer} from './components'; @Component({ components: { Layout, Settings, Header, Footer } })
相关文章
- [Nuxt] Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js
- [Nuxt] Add Arrays of Data to the Vuex Store and Display Them in Vue.js Templates
- [Vue-rx] Share RxJS Streams to Avoid Multiple Requests in Vue.js
- [Nuxt] Build a Vue.js Form then use Vuex Actions to Post to an API in Nuxt
- [Vue] Use Vue.js Watchers to Respond to Async Updates
- vue.js3.x 使用vue3-count-to 组件(到可视区域才start数字滚动 vue@3.2.33 / vue3-count-to@1.1.2)
- vue.js 3.2.22:菜单每行依次滑动出现的动画
- linux:ubuntu21.04:npm安装@vue/cli时报错(@vue/cli 4.5.13/npm 7.21.0/node 14.17.1)
- vue指令:绑定样式:style
- vue路由报错Navigating to current location (“/login“) is not allowed踩坑总结
- IDEA整合SpringBoot-Vue项目
- vue.js项目打包报错Error: You appear to be using a native ECMAScript module configuration file
- Vue+Element UI
- Vue.js中 watch 的高级用法
- Vue.js 目录结构