vue系列 slot在專案中的使用

2021-09-26 03:09:54 字數 1728 閱讀 8836

父元件：



我是父元件


我是內容


<


/slotshow>


<


/div>


<


/template>


import slotshow from


'./slotshow'


export


default


}<


/script>
子元件：



<


/slot>


我是子元件<


/div>


<


/div>


<


/template>
得到的效果就是：

我是父元件

我是內容

我是子元件

情況1：子元件不包含，那麼父元件中之間的內容會被忽略

情況2：當子元件中有預設值的時候，父元件中之間沒有值，則會使用這個預設值

父元件：



我是父元件


"top"


>我是上<


/p>


"bottom"


>我是下<


/p>


<


/slotshow>


<


/div>


<


/template>


import slotshow from


'./slotshow'


export


default


}<


/script>
子元件：



"top"


>


<


/slot>


我是子元件<


/div>


"bottom"


>


<


/slot>


<


/div>


<


/template>
得到的效果就是：

我是父元件

我是上我是子元件

我是下父元件：



我是父元件


// scope => slot-scope => v-scope


// 隨著vue版本的更新 scope 的寫法在不斷變化，具體檢視vue文件


"props"


>


}<


/template>


<


/slotshow>


<


/div>


<


/template>


import slotshow from


'./slotshow'


export


default


}<


/script>
子元件：



"這是子元件的插槽"


>


<


/slot>


我是子元件<


/div>


<


/div>


<


/template>
得到的效果就是：

我是父元件

這是子元件的插槽

我是子元件

vue專案中slot的使用

vue中的插槽 slot 插槽 slot 是vue提出來的乙個概念，正如名字一樣，插槽用於決定將所攜帶的內容，插入到指定的某個位置，從而使模板分塊，具有模組化的特質和更大的重用性。案列如下 sectionset.vue是帶有slot的乙個元件 slottest.vue元件呼叫sectionset.v...

Vue系列 在vue專案中使用echarts

該示例使用vue cli腳手架搭建 npm install echarts s或者使用國內的 映象 npm install g cnpm registry taobao org cnpm install echarts s 引入echarts import echarts from echarts ...

Vue系列 在vue專案中使用echarts

該示例使用vue cli腳手架搭建 npm install echarts s或者使用國內的 映象 npm install g cnpm registry cnpm install echarts s 引入echarts import echarts from echarts vue.prototy...