vue插槽组件的组合/分布示例

使用槽来分发内容

组件通常组合使用，如下所示：

如果将component b/component b component c/component c/component a直接应用于组件，父组件会覆盖子组件，无法达到所需的效果。为了达到这种效果，应该将槽用于内容分发

插槽的使用如下：

body div id=' app ' app child/child child 2/child 2/app/div/bodyscriptvue.component(' app '，{template3360' \ div \ slot没有，this/slot \ Li 111/Li \ Li 222/Li \ Li 333/Li \/div \ '，}) var app=new Vue({ el:'#app '，component : { ' child ' : { template 3: ' div hello word/div ' })

当没有引入其他组件时，app/app标签如图1所示，当有其他组件时，如图2所示。

同时，可以测量可以引入多个并行组件，组件将依次显示

但是，这只能解决单个组件的引入。在实际应用中，需要多个应用的组件将位于多个位置。要解决这个问题，必须确定槽位的唯一性。为了确定插槽的vue，我们可以在插槽中添加行内名称进行识别。

需要注意的是，同一父项下插槽添加行的名称必须唯一；

子组件下的插槽名称可以和父组件的插槽名称重复，每个级别都有相对独立性。

代码呈现如下：

body div id='app' app子插槽=' slot 1 '/子div插槽='slot2 '如何使用插槽？/div/app/div/bodyscriptvue.component(' app '，{ template 3360 ' \ div \ slot name=' slot 1 ')，this /slot\ li111/li\ li222/li\如果没有slot name='slot2 '，则会显示this/slot \ li333/li \/div。}) var app=newvue ({el:' # app '，components 3360 { ' child ' 3360 { template 3360 ' div hello word \ Li 22222/Li \/div ' }，' child 2 ' : { template : ' div hello vue js/div ' } } })/script

vue插槽组件组合/分发的上述示例是边肖共享的所有内容。希望能给大家一个参考，支持我们。