Vue slot插槽 的理解 原

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

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

<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  這樣子很好理解了吧

<template>
<div>
{{name}}

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

<script>
export default {
   name: 'aa',
   data () {
     return {
       name: 'helloword'
     }
   }
}
</script>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章