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

Question

我正在制作一个 todo 应用程序以更好地理解 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>

标签： javascriptvue.jsvue-component

Answer 1

问题是您试图在 javascript-executed 属性中使用模板语法：

<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>

希望这可以帮助！