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>
相关文章
相关标签/搜索