[Vue @Component] Pass Props to Vue Functional Templates

Posted answer1215

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[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 初次渲染

vue 初次渲染

vue 初次渲染

深入理解vue中Props属性

vue 动态路由 component引入报错?

[Vue @Component] Simplify Vue Components with vue-class-component