[Vue @Component] Pass Props to Vue Functional Templates
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 @Component] Pass Props to Vue Functional Templates的更多相关文章
- [Vue @Component] Pass Props Between Components with Vue Slot Scope & renderless component
Components with slots can expose their data by passing it into the slot and exposing the data using ...
- [Vue @Component] Pass Vue Render Functions as Props for Powerful Patterns
Render functions open up a world of customization and control by using pure JavaScript rather than V ...
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
While traditional Vue components require a data function which returns an object and a method object ...
- Vue组件选项props
前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props ...
- vue.js实战——props数据验证(自定义构造器检测)
Vue.component('my-component',{ props:{ //必须是数字类型 propA:Number, //必须是字符串或数字类型 propB:[String,Number], ...
- vue.js实战——props单向数据流
Vue2.x通过props传递数据是单向的了,也就是父组件数据变化时会传递给子组件,但是反过来不行. 业务中会经常遇到两种需要改变prop的情况, 一种是父组件传递初始值进来,子组件将它作为初始值保存 ...
- 【转存】Vue组件选项props
原帖地址 前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 ...
- Vue组件之props,$emit与$on以及slot分发
组件实例之间的作用域是孤立存在,要让它们之间的信息互通,就必须采用组件的通信方式 props用于父组件向子组件传达信息 1.静态方式 eg: <body> <div id=&quo ...
- element-ui + el-dialog + Vue.component 注册的富文本控件 第二次及以后打开dialog出现问题解决方法
自定控件 添加属性 v-if="dialogVisible" <el-dialog title="" :visible.sync="dialo ...
随机推荐
- C#基础 进制转换6/17
二进制→十进制: 计算公式:a*20+b*21+c*22+…+m*2(n-1) 公式中a为二进制数右边第一位数,b为第二位数,以此类推 例:二进制1011010转换为十进制数为 0*20+1*21+0 ...
- EasyUI系列学习(九)-Panel(面板)
一.加载方式 1.class加载 <div class="easyui-panel" title="面板一" style="width:500p ...
- ubuntu查看系统资源占用(内存,cpu和进程)
http://blog.csdn.net/vivian187/article/details/51476043 http://bluexp29.blog.163.com/blog/static/338 ...
- TensorFlow OOM when allocating tensor with shape[5000,384707]
在session范围内不要进行eval()或者convert_to_tensor()操作, 否则会造成OOM,或者报出错误:GraphDef cannot be larger than 2GB usi ...
- Selenium学习第二天,了解Selenium工作模式与学习Selenium需要具备的知识与工具。
Selenium学习网站: 1.http://www.ltesting.net/ceshi/open/kygncsgj/selenium/2014/0408/207237.html——好像是对API的 ...
- PHP几个常用的概率算法
算法一 /** * 全概率计算 * * @param array $p array('a'=>0.5,'b'=>0.2,'c'=>0.4) * @return string 返回上面 ...
- 【sqli-labs】 less61 GET -Challenge -Double Query -5 queries allowed -Variation4 (GET型 挑战 双查询 只允许5次查询 变化4)
http://192.168.136.128/sqli-labs-master/Less-61/?id=1' 单引号双括号闭合 192.168.136.128/sqli-labs-master/Les ...
- 04Servlet的生命周期
Servlet的生命周期 Servlet运行在Servlet容器中,其生命周期由容器来管理.Servlet的生命周期通过javax.servlet.Servlet接口中的init().service( ...
- 如何创建TWaver 3D的轮廓选中效果
在一般的游戏中,物体的选中效果会是这样: TWaver 3D中,物体的默认的选中效果一般都是一个方方正正的外框.在HTML5的Mono版本中,TWaver提供了轮廓线样式的选中效果. 通过如下代码把几 ...
- Script:shell脚本生成随机字符串
#!/bin/bash # bash generate random alphanumeric string # # bash generate random character alphanumer ...