海綿寶寶撒
2019-03-20 10:13:33
在使用作用域組件的時(shí)候,按照教程做了一個(gè)例子,但是無(wú)法顯示組件及傳遞的內(nèi)容,不知道原因是什么?代碼如下: <div id="G14"> <p>這是父組件</p> <n-component slot-scope="props"> <p>這個(gè)是作用域插槽,用來(lái)傳遞數(shù)據(jù)</p> <p>{{ props.text }}</p> </n-component> </div> <script> Vue.component('n-component',{ template:'<div><slot text="這是傳遞的數(shù)據(jù)"></slot></div>' }) new Vue({ el:'#G14' }) </script> 在瀏覽器中的樣子是控制臺(tái)也沒(méi)有報(bào)錯(cuò),,請(qǐng)問(wèn)問(wèn)題在哪里呢?
1 回答

蕭十郎
TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超13個(gè)贊
你的子組件的slot可能有些問(wèn)題,但是先不管那個(gè),slot-scope有兩種寫(xiě)法。
不用template的寫(xiě)法
<n-component>
<p>這個(gè)是作用域插槽,用來(lái)傳遞數(shù)據(jù)</p> // 根據(jù)你的子組件這個(gè)是沒(méi)有slot對(duì)應(yīng)的
<p slot-scope="props">{{ props.text }}</p>
</n-component>
用template
<n-component>
<template slot-scope="props">
<p >這個(gè)是作用域插槽,用來(lái)傳遞數(shù)據(jù)</p>
<p>{{props.text}}</p>
</template>
</n-component>
什么意思呢,這個(gè)slot-scope是加到slot對(duì)應(yīng)的結(jié)構(gòu)上的。
添加回答
舉報(bào)
0/150
提交
取消