Vuejs -如何在作用域插槽中传递父级和子级之间的更改

Question

我正在尝试创建一个有两个插槽的组件。第二个插槽根据第一个插槽中的项目数重复。我已经使用范围槽实现了这一点，但是，当数据在第一个时隙上更新时，第二个插槽在触发事件之前不会自动更新它，例如:单击调用方法的按钮。

是否有办法使第二个插槽在第一个插槽上更改数据时更新其视图？

下面是我的例子：

Jsfiddle：https://jsfiddle.net/89vykm75/1/

​

new Vue({
	el: '#app',
  components: {
  	'repeat-for-each-item': {
      data: function() {
          return {
              items: []
          }
      },
    	template: `<div>
          <slot name="item" v-for="item in items" :item="item"></slot>
          <button @click="addItem()">Add item</button>
          <slot name="repeat" v-for="item in items" :item="item"></slot>
      </div>
      `,
      methods: {
        addItem() {
          this.items.push({});
        }
      }
    }
  }
});

<div id="app">
  <repeat-for-each-item>
    <template slot="item" scope="props">
      <div>
        <input type="text" v-model="props.item.name">
      </div>
    </template>
    
    <template slot="repeat" scope="props">
      <div>
        <label>
            <span v-if="props.item.name">{{props.item.name}}:</span>
            <span v-else>No Name:</span>
        </label>
        <input type="text">
      </div>
    </template>
  </repeat-for-each-item>
</div>

​

Answer 1

你掉进了Vue 变更检测警告。这里的问题是，如果在将对象添加到Vue数据之前不存在的对象中添加了属性，则Vue无法检测更改。以下是问题所在：

this.items.push({})

您正在添加一个没有属性的对象，然后将v-model绑定到该对象的name属性，该属性不存在。Vue无法检测更改，也不会更新绑定到该属性的其他项。

如果你这样做了：

this.items.push({name: null})

你会发现你的代码有效。下面是一个更新的小提琴。

Answer 2

我通过在keyup上调用方法找到了一个解决方案。

基本上，我在插槽上添加了@keyup事件

<input type="text" v-model="props.item.name" @keyup="props.onchange()">

在组件模板上，将onchange方法传递给槽。

<slot name="item" v-for="item in items" :item="item" :onchange="onchange"></slot>

，然后使用onchange函数强制重呈现。

onchange:() => {
    // hack to trigger changes
    this.$set(this.items, 0, this.items[0]);
}

以下是完整工作的JsFiddle：https://jsfiddle.net/89vykm75/2/

我想知道是否有一个更清洁的解决方案？