码迷,mamicode.com
首页 > 其他好文 > 详细

[Vue @Component] Pass Props Between Components with Vue Slot Scope

时间:2018-07-22 20:04:35      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:ora   enter   with   ext   answer   bye   mil   temp   nbsp   

Components with slots can expose their data by passing it into the slot and exposing the data using slot-scope in the template. This approach allows you to pass props down from Parent components to Child components without coupling them together.

 

For example, we have two components, Settings and Layout component:

<Settings>
    <Layout></Layout>
</Seetings>

 

We want Layout get data from Settings component, we can do it with slot-scope


Seetings.vue:

<template>
    <div>
        <slot :header=header :footer=footer></slot>    
    </div>
</template>
<script>
import {Component, Vue} from vue-property-decorator

export default class Settings extends Vue {
    header = This is data for header
    footer = This is the data form footer
}
</script>

 

Layout.vue:

<template>
    <div class="flex flex-col h-screen">
    <slot name="header">
      <h1 class="text-red">Please add a header!</h1>
    </slot>
    <slot name="content">
      <div class="text-red flex-grow">Please add some content</div>
    </slot>
    <slot name="footer">
      <h2 class="text-orange">Please add a footer!</h2>
    </slot>
    </div>
</template>

 

HelloWorld.vue:

<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
  }
})
export default class HelloWorld extends Vue {
  @Prop({
    default: Default message from Hello World Component
  })
  message

  onClick() {
    this.message = Goodbye
  }
}
</script>

 

The concept is a bit similar to Angular ngTemplateOutlet

[Vue @Component] Pass Props Between Components with Vue Slot Scope

标签:ora   enter   with   ext   answer   bye   mil   temp   nbsp   

原文地址:https://www.cnblogs.com/Answer1215/p/9351069.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!