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>

 

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