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>

  <p>这个是作用域插槽，用来传递数据</p> // 根据你的子组件这个是没有slot对应的

  <p slot-scope="props">{{ props.text }}</p>

</n-component>

用template

<n-component>

  <template slot-scope="props">

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

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

  </template>

</n-component>

什么意思呢，这个slot-scope是加到slot对应的结构上的。