zoukankan      html  css  js  c++  java
  • [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
      }
    })
  • 相关阅读:
    服务器使用ssh秘钥登录并禁止密码登录
    c# @符号后面对双引号(")转义
    unity EditorWindow拖入文件或文件夹
    unity 生成GUID
    unity 将对象始终放在鼠标位置和指定的相机z轴位置
    unity 打开指定路径文件夹
    unity UTF8格式加载和保存xml
    VsCode 手动配置omnisharp、.NET Core Debugger、razor
    Maya 保存场景时UV和UV集丢失
    进程通信机制
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9362569.html
Copyright © 2011-2022 走看看