javascript - 无法让 $emit 将 prop 传递给 vuejs 中的父级

Question

我正在制作一个待办事项应用程序以更好地理解 Vue，但遇到了障碍。

我已经浏览了几个 StackOverflow 问题和 Vuejs 论坛，但我不明白我做错了什么。

问题源于 to-do-item 组件模板:

  <button 
    @click="$emit('remove-item', {{item.id}} )">
    Remove
  </button>

如果我将 $emit 替换为不调用 $emit 的组件方法，它可以正常工作，但是当我使用 $emit 时(即使在本地组件函数中)它拒绝渲染。

我不知道这是为什么。这是我的其余代码:

Vue.component("todo-item", {
  props:["item"],
  template: `
<li>{{ item.text }} 
  <button 
    @click="$emit('remove-item', {{item.id}} )">
    Remove
   </button>
</li>`
})

let vm = new Vue({
  el:"#app",
  data: {
    text: "",
    todos: []
  },
  methods: {
    getID: (function() {
      let id = 0;
      return function() {
        return id++;
      }
    }()),
    addTodo: function() {
      this.todos.push({id: this.getID(), text: this.text});
      this.text = "";
    },
    remove: function(remove_id) {
      this.todos = this.todos.filter(({id}) => id != remove_id);
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<div id="app">
  <div id="container">
    <main>
      <ul>
         <todo-item
                    v-for="todo in todos"
                    :item="todo"
                    @remove-item="remove"
                   >
          </todo-item>
      </ul>
    </main>
  <div id="add-field">
  <input v-model="text" /> <button id="add" @click="addTodo">Add Todo</button>
    </div>
    </div>
</div>

Answer 1

问题是您尝试在 javascript 执行的属性中使用模板语法:

<button 
    @click="$emit('remove-item', {{item.id}} )">

解决这个问题，它应该可以工作:

Vue.component("todo-item", {
  props:["item"],
  template: `
<li>{{ item.text }} 
  <button 
    @click="$emit('remove-item', item.id )">
    Remove
   </button>
</li>`
})

let vm = new Vue({
  el:"#app",
  data: {
    text: "",
    todos: []
  },
  methods: {
    getID: (function() {
      let id = 0;
      return function() {
        return id++;
      }
    }()),
    addTodo: function() {
      this.todos.push({id: this.getID(), text: this.text});
      this.text = "";
    },
    remove: function(remove_id) {
      this.todos = this.todos.filter(({id}) => id != remove_id);
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<div id="app">
  <div id="container">
    <main>
      <ul>
         <todo-item
             v-for="todo in todos"
             :item="todo"
             @remove-item="remove"
             >
          </todo-item>
      </ul>
    </main>
  <div id="add-field">
      <input v-model="text" /> 
      <button id="add" @click="addTodo">Add Todo</button>
  </div>
</div>

希望这有帮助!