[Vue @Component] Pass Props to Vue Functional Templates
Vue to Component functional Props pass templates
2023-09-14 08:59:17 时间
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 } })
相关文章
- Vue_(Router路由)-vue-router路由的基本用法
- vue.js入门(五,组件更新,计算属性,watch监听)
- [systemd]How To Use Systemctl to Manage Systemd Services and Units
- vue执行命令时报错问题
- 2-3 vue配置介绍
- [Nuxt] Add Arrays of Data to the Vuex Store and Display Them in Vue.js Templates
- [Vue] Get up and running with vue-router
- [Vue @Component] Pass Props Between Components with Vue Slot Scope & renderless component
- [Vue-rx] Share RxJS Streams to Avoid Multiple Requests in Vue.js
- [Vue @Component] Dynamic Vue.js Components with the component element
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- vue.js3.x 使用vue3-count-to 组件(到可视区域才start数字滚动 vue@3.2.33 / vue3-count-to@1.1.2)
- vue路由报错Navigating to current location (“/login“) is not allowed踩坑总结
- vue:export default 和 export 区别(difference between Vue 'export default' and 'new Vue')
- You currently don‘t have access to this membership resource. To resolve this issue, agree to the lat
- vue读书笔记
- npm 报错 request to https://registry.cnpmjs.org/vue failed, reason: Hostname/IP does not match certificate‘
- vue 中引用jquery
- vue3 - 报错 ESLint: Component name "index" should always be multi-word.(vue/multi-word-component-names)
- vue.js项目打包报错Error: You appear to be using a native ECMAScript module configuration file
- Vue新窗口打开this.$router
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- PAT 1033. To Fill or Not to Fill (贪心)
- Vue(一)vue 概述与用法、MVVM、绑定语法、vue 指令