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

 分类:vue教程时间:2022-06-17 07:30:54点击:
Vue插槽有什么作用(看这个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插槽的作用是简化组件之间的嵌套,动态改变组件内容的一种语法工具。


除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: