vue使用作用域插槽为起作用，并且无法显示组件

Question

在使用作用域组件的时候，按照教程做了一个例子，但是无法显示组件及传递的内容，不知道原因是什么？

代码如下：

               <div id="G14">

                <p>这是父组件</p>

                    <n-component slot-scope="props">

                       <p>这个是作用域插槽，用来传递数据</p>

                       <p>{{ props.text }}</p>

                    </n-component>

                </div>

                <script>

                  Vue.component('n-component',{

                    template:'<div><slot text="这是传递的数据"></slot></div>'

                  })

                  new Vue({

                    el:'#G14'

                  })

                </script>

            

在浏览器中的样子是

控制台也没有报错，，请问问题在哪里呢？

Answer 1

你的子组件的slot可能有些问题，但是先不管那个，slot-scope有两种写法。不用template的写法<n-component>&nbsp; <p>这个是作用域插槽，用来传递数据</p> // 根据你的子组件这个是没有slot对应的&nbsp; <p slot-scope="props">{{ props.text }}</p></n-component>用template<n-component>&nbsp; <template slot-scope="props">&nbsp; &nbsp; <p >这个是作用域插槽，用来传递数据</p>&nbsp; &nbsp; <p>{{props.text}}</p>&nbsp; </template></n-component>什么意思呢，这个slot-scope是加到slot对应的结构上的。