Question

目前我收到此错误：

重复出现插槽＆＃34;默认＆＃34;在同一个渲染树中找到 - 这可能会导致渲染错误。

虽然有一些关于如何解决这个问题的例子，但我并不确切知道如何解决这个问题。

这是我在我的PHP文件中用于搜索组件的标记。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:my="http://schemas.android.com/apk/lib/mycomponents"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
  <mycomponents.views.ImageIconView
    android:layout_width="match_parent"
    android:layout_height="150dp" 
    my:text="text from xml!!!"
    my:imageIcon="50"
    my:alignment="center"
    />

</LinearLayout>

我的<search> <form action="#" class="form-inline"> <div class="form-group"> <label for="number_persons">Persons</label> <select class="form-control" name="num_persons"> <etc> </select> </div> </form> </search>搜索组件的模板如下所示：

.vue

从文档中我看到你要使用像作用域一样的插槽？我已经尝试过实施它们，但我无法让它发挥作用。我只是尝试将范围添加到PHP文件和vue组件中的<template> <div class="item" v-for="item in items"> <div class="alert alert-warning" v-show="prices"> <slot></slot> </div> <pagination></pagination> </div> </template>。

任何人都可以告诉我在这种情况下使用什么语法？

来自@Cobaltway的更新示例

https://jsfiddle.net/31x0cy2p/1/

Answer 1

对于作用域插槽，父级中的<template>元素具有属性范围，似乎是必需的，如第三个示例here中所指定的那样。它必须是模板元素，它不能与其他任何东西一起使用。

在父级中，<template>元素具有特殊属性范围表示它是作用域槽的模板。范围的值是保存传递的props对象的临时变量的名称来自孩子。

Vue.component('search', {
  template: `
    <div>
      <div v-for="n in 10">
        <slot :text="n"></slot>
      </div>
    </div>`
});

new Vue({el:'#app'});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="app">
  <search>
    <template scope="props">
        <form action="#">
            <div>
                <label for="number_persons">Person {{ props.text }}</label>
                <select name="num_persons"></select>
            </div>
        </form>
    </template>
  </search>
</div>

在这种情况下如何解决重复的插槽存在？ [Vue公司]

1 个答案: