如何在 vue.js 的模板内的函数内传递道具？

Question

我正在尝试在我正在制作的待办事项测试站点的模板内的函数内传递道具。基本上我想要一个列表项，其中包含待办事项项，旁边有一个按钮，可以删除相同的项。

Vue.component("todo-item", {
          props: ["todotext"],
          template: "<li>{{todotext.text}} <button v-on:click='removeThisItem({{todotext}})'>X</button></li>",
        })

        var next_id = 3

        var app = new Vue ({
          el: "#app",
          data: {
            message: "",
            todos: [
              {id: 0, text: "Do assignment"},
            ]
          },
          methods: {
            addTodoItem: function () {
              this.todos.push({id: next_id, text: this.message})
              next_id += 1
            },

            removeThisItem: function removeThisItem (item) {
              this.todos.splice(this.todos.indexOf(item))
            }
          }
        })

和 HTML

<div id="app">
        <input type="text" name="" v-model="message">
        <button type="button" name="button" v-on:click="addTodoItem">Add Todo Item</button>
        <ul>
          <todo-item
            v-for="todo in todos"
            v-bind:todotext="todo"
            v-bind:key="todo.id">
          </todo-item>

        </ul>
      </div>

但是我得到了错误 invalid expression: Unexpected token '{' in removeThisItem({{todotext}}) 有没有办法在这个模板内的这个函数中将 prop 作为参数传递，以便能够删除这个列表项？

编辑：这里是 JSFiddle：https://jsfiddle.net/f6sn52w8/

谢谢！

Answer 1

好吧，尝试解决你的 jsfiddle 中的问题，我得到了错误

[Vue warn]: Property or method "outerHTML" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in <TodoItem>)

无论如何，我弄清楚了您的代码发生了什么以及为什么它不起作用。

您有使用 todo-item 组件的父组件：

<!-- parent component -->
<div id="app">
  <input type="text" name="" v-model="message">
  <button type="button" name="button" v-on:click="addTodoItem">
    Add Todo Item
  </button>
    <ul>
      <todo-item
        v-for="todo in todos"
        v-bind:todotext="todo"
        v-bind:key="todo.id">
      </todo-item>
    </ul>
  </div>

该组件中声明了 removeThisItem 方法，因此在子组件<todo-item> 中不可用，这就是您在控制台中看到错误的原因。

所以处理点击移除项目的方法是在父组件中监听一个事件并从子组件发出事件：

关于简写的注意事项：v-bind:todotext="todo" 等同于:todotext="todo"，v-on:click 等同于@click

<!-- parent component -->
<div id="app">
  <input type="text" name="" v-model="message">
  <button type="button" name="button" v-on:click="addTodoItem">
    Add Todo Item
  </button>
    <ul>
      <todo-item
        v-for="todo in todos"
        :todotext="todo"
        :key="todo.id"
        @removeItem="removeThisItem"> <!-- listen for the removeItem event and run the removeThisItem method when it's triggered -->
      </todo-item>
    </ul>
  </div>

现在必须更新子组件模板：

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

todo-item 组件将在单击按钮时发出事件 removeItem，并将 todotext 属性作为参数发送给将在父级上运行的函数 (removeThisItem)。

另一种更好地解释这种行为的方法：

Vue.component("todo-item", {
  props: ["todotext"],
  template:
    `<li>
       {{todotext.text}} 
       <button @click="emitEventRemoveItem">X</button>
     </li>`,
   methods: {
    emitEventRemoveItem() {
      // this.$emit will emit an event to the parent
      // the first parameter is the event name, the second parameter
      // is the argument that is expected in the parent method that
      // will run when the event is triggered, removeThisItem in this case
      this.$emit('removeItem', this.todotext);
    }
   }
})

尝试在您的编辑器中运行它，在 jsfiddle 中出现错误。无论如何，问题在于您正在尝试从子组件运行在父组件中声明的方法。

让我知道它是否有效或是否有任何错误。