Question

我今天刚刚在Vue官方教程中了解了插槽。在我阅读时，我在范围内的插槽中遇到了这个示例：https://vuejs.org/v2/guide/components.html#Scoped-Slots。

我通过在每个项目中添加输入字段进行了一些实验。

父：

<my-list :items="items"> 
    <template slot="item" scope="props">
        <li class="my-fancy-item">{{ props.text }}</li>
    </template>
</my-list>

儿童模板：

  <ul>
     <slot name="item" v-for="item in items" :text="item.text">
     </slot>
     <div> // this will appear at the end of list
         <input v-model = "message"> 
     </div>
     <p>{{message}}</p>
  </ul>

我的第一次尝试是将输入移动到父作用域并通过使用props传入索引和输入值来修改原始数组来调用子函数。它按预期工作。

另一种尝试是对父作用域进行绑定，但它不起作用，因为父作用域看不到子属性：https://vuejs.org/v2/guide/components.html#Compilation-Scope

插入此输入以使其显示在每个项目中仍然能够将输入绑定到子属性的最佳方法是什么？

Answer 1

根据我们的讨论，我认为你想要的就是这个。因为您希望message可以独立编辑，所以它必须是项目的一部分。如果您message成为my-list的一部分，则所有消息都是相同的。之后，您需要做的就是将item传递给范围模板。

Vue.component("my-list",{
  props:["items"],
  template: "#my-list-template",
})

new Vue({
  el:"#app",
  data:{
    items:[
      {text: "item 1", message: "message 1"},
      {text: "item 2", message: "message 2"},
      {text: "item 3", message: "message 3"}
    ]
  }
})

模板：

<div id="app">
  {{items}}
  <my-list :items="items"> 
      <template slot="item" scope="props">
        <li class="my-fancy-item">{{ props.item.text }}</li>
        <div> 
             <input v-model="props.item.message"> 
         </div>
         <p>{{props.item.message}}</p>
      </template>
  </my-list>

</div>

<template id="my-list-template">
  <ul>
     <slot name="item" 
           v-for="item in items" 
           :item="item">
    </slot>
  </ul>
</template>

这是working example。

如何在范围插槽中包含v-for的输入？

1 个答案: