Vue插槽有什么作用(看这个Vue插槽实例就懂了)

Vue插槽有什么作用？首先要明白插槽是使用在子组件中的，Vue插槽的作用是为了将父组件中的子组件模板数据正常显示，Vue插槽的作用是简化组件之间的嵌套，动态改变组件内容的一种语法工具。

一、Vue插槽使用实例代码

声明一个child组件

<div id="app">
      <child>你好Box</child>
    </div>
    <script>
      Vue.component('child', {
        template: `<div>
    <p>Hello box</p>
    </div>`
      })
      var app = new Vue({
        el: "#app",
      })
    </script>

说明：看上面的代码，“你好Box”中的内容没有起作用，此时我们引出Vue插槽来解决这个问题

<script>
Vue.component('child', {
template: `<div>
   <p>Hello box</p>
   <slot></solt>
   </div>`
})
var app = new Vue({
el: "#app",
})
</script>

说明：我们在组件中加入插槽后你好Box中的内容起作用了，若在没有定义内容，我们可以在中定义默认内容

<div id="app">
<child></child>
</div>
<script>
  Vue.component('child', {
template: `<div>
  <p>Hello box</p>
  <slot>默认内容</solt>
  </div>`
})
var app = new Vue({
  el: "#app",
})
</script>

二、Vue插槽有什么作用？

通过上面的实例我们知道了vue插槽有什么作用了？首先要明白插槽是使用在子组件中的

1、Vue插槽的作用是为了将父组件中的子组件模板数据正常显示；

2、Vue插槽的作用是简化组件之间的嵌套，动态改变组件内容的一种语法工具。