Javascript Vue2.7中，vslot不可用，如何解决

发布于07月21日

当我运行以下代码时，我得到以下结果(谷歌浏览器运行截图).

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>17-Learning of Scoped Slots and Named Slots</title>
    <style>
      .h1Class{
        color:red;
      }
    </style>
  </head>
  <body>
    <div id="div_new">
      <h1 class="h1Class">first set</h1>
      <cpn></cpn>
      <h1 class="h1Class">second set</h1>
      <cpn>
        <!-- first method -->
        <template  slot="slotName" slot-scope="planallScope">
        <!-- second method after Vue2.6 -->
        <!-- <template v-slot:slotName="planallScope" > -->
          <h4>{{planallScope.planall[0]}}</h4>
          <h4>{{planallScope.planall[1]}}</h4>
          <h4>{{planallScope.planall[2]}}</h4>
        </template>
      </cpn>
    </div>
    <template id="template_div">
      <div>
        <slot v-bind:planall="plan" name="slotName">
          <ul>
            <li v-for="item in plan"> {{ item }}</li>
          </ul>
        </slot>
      </div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.7/dist/vue.js"></script>
    <script>
      const templateDivText = {
        template: '#template_div',
        data() {
          return {
            plan:  ['C#', 'Java', 'JavaScript']
          }
        },
      } 
    const app_new = new Vue({
      el: '#div_new',
      components: {
        'cpn': templateDivText,
      },
    })
    </script>
  </body>
  </html>

运行结果如下:

enter image description here

当我使用v型槽时，代码如下:

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>17-Learning of Scoped Slots and Named Slots</title>
    <style>
      .h1Class{
        color:red;
      }
    </style>
  </head>
  <body>
    <div id="div_new">
      <h1 class="h1Class">first set</h1>
      <cpn></cpn>
      <h1 class="h1Class">second set</h1>
      <cpn>
        <!-- first method -->
        <!-- <template  slot="slotName" slot-scope="planallScope"> -->
        <!-- second method after Vue2.6 -->
        <template v-slot:slotName="planallScope" >
          <h4>{{planallScope.planall[0]}}</h4>
          <h4>{{planallScope.planall[1]}}</h4>
          <h4>{{planallScope.planall[2]}}</h4>
        </template>
      </cpn>
    </div>
    <template id="template_div">
      <div>
        <slot v-bind:planall="plan" name="slotName">
          <ul>
            <li v-for="item in plan"> {{ item }}</li>
          </ul>
        </slot>
      </div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.7/dist/vue.js"></script>
    <script>
      const templateDivText = {
        template: '#template_div',
        data() {
          return {
            plan:  ['C#', 'Java', 'JavaScript']
          }
        },
      } 
    const app_new = new Vue({
      el: '#div_new',
      components: {
        'cpn': templateDivText,
      },
    })
    </script>
  </body>
  </html>

运行结果如下:

enter image description here

那么在Vue2.7中，v槽不可用，如何解决这个问题？

const templateDivText = Vue.defineComponent({ template: '#template_div', data() { return { plan: ['C#', 'Java', 'JavaScript'] } }, }) const app_new = new Vue({ el: '#div_new', components: { 'cpn': templateDivText, }, })

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.7/dist/vue.min.js"></script> <div id="div_new"> <cpn> <template #slot-name="{planall}"> <h4>{{planall[0]}}</h4> <h4>{{planall[1]}}</h4> <h4>{{planall[2]}}</h4> </template> </cpn> </div> <template id="template_div"> <div> <slot name="slot-name" :planall="plan"> <ul> <li v-for="item in plan"> {{ item }}</li> </ul> </slot> </div> </template>

Javascript Vue2.7中，vslot不可用，如何解决

推荐答案

Javascript相关问答推荐

使用useup时，React-Redux无法找到Redux上下文值

我试图实现用户验证的reduxstore 和操作中出了什么问题？

如何解决CORS政策的问题

Exceljs：我们在file.xlsx(...)&#中发现了一个问题'"" 39人；

自定义高图中的x轴标签序列

我在我的Java代码中遇到了问题，代码的一部分看不到先前定义的对象

如何通过使用vanilla JS限制字体大小增加或减少两次来改变字体大小

使用原型判断对象是否为类的实例

Jest toHaveBeenNthCalledWith返回当前设置的变量值，而不是调用时的值

向数组中的对象添加键而不改变原始变量

我想将Sitecore搜索面过滤器从多个转换为单个

使用Document.Evaluate() Select 一个包含撇号的HTML元素

无法重定向到Next.js中的动态URL

将范围 Select 器添加到HighChart面积图

正则表达式以确定给定文本是否不只包含邮箱字符串

Plotly.js栏为x轴栏添加辅助文本

如何在Reaction中设置缺省值， Select 下拉列表，动态追加剩余值？

使用props 将VUE 3组件导入JS文件

JSX/React -如何在组件props 中循环遍历数组

material UI自动完成全宽