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
      }
    })
  • 相关阅读:
    poj 1015 Jury Compromise(背包+方案输出)
    最长公共上升子序列 (poj 2127) (Greatest Common Increasing Subsequence)
    轮廓线DP:poj 2279 Mr. Young's Picture Permutations
    LCS的几种求法
    POJ 1737 Connected Graph(高精度+DP递推)
    Cats transport(codeforces311B)(斜率优化)
    高精度(压位+判负数+加减乘+读写)
    洛谷 P2257 YY的GCD
    [POI2007]ZAP-Queries (莫比乌斯反演+整除分块)
    [SDOI2010]古代猪文 (欧拉,卢卡斯,中国剩余)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9362569.html
Copyright © 2011-2022 走看看