在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ vue使用作用域插槽為起作用，并且無(wú)法顯示組件

vue使用作用域插槽為起作用，并且無(wú)法顯示組件

在使用作用域組件的時(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>

在瀏覽器中的樣子是

clipboard.png

控制臺(tái)也沒(méi)有報(bào)錯(cuò)，，請(qǐng)問(wèn)問(wèn)題在哪里呢？

回答
編輯回答
笑浮塵

你的子組件的slot可能有些問(wèn)題，但是先不管那個(gè)，slot-scope有兩種寫法。

  1. 不用template的寫法

    <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>

  2. 用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)上的。

2017年12月29日 18:17