Vue slot插槽 的理解

就是將父組件調用子組件時的內容 在b中展現出來vue

父組件,調用了HelloWord  這個時候如何將這是個slot展現給b組件呢code

<template>
  <div id="zujian">
    組件1
    <HelloWorld>這是個slot</HelloWorld>
    <HelloWorld>這是個slot2</HelloWorld>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

子組件HelloWorld.vue  這樣子很好理解了吧component

<template>
<div>
{{name}}

<slot>這裏面將插入父組件裏面填寫的內容</slot>
</div>
</template>

<script>
export default {
   name: 'aa',
   data () {
     return {
       name: 'helloword'
     }
   }
}
</script>
相關文章
相關標籤/搜索