VueJs：从组件内部的根元素使用方法

Question

在一个简单的HTML页面中，我使用了以下vueJs代码。我需要单击按钮，该按钮将在DOM中插入一个复选框和一个文本。

我的代码如下：

<template id="add-item-template">
    <div class="input-group">
        <input  v-model="newItem" placeholder="add shopping list item" type="text" class="form-control">
        <span class="input-group-btn">
            <button @click="addItem" class="btn btn-default" type="button">Add!</button>
        </span>
    </div>
</template>

<div id="app" class="container">
    <h2>{{ title }}</h2>
    <add-item-component></add-item-component>
</div>

而javascript部分是：

<script>
    var data = {
        items: [
            {
                text: 'Bananas', 
                checked: true 
            }, 
            { 
                text: 'Apples', 
                checked: false 
            }
        ],
        title: 'My Shopping List'
    };

    Vue.component('add-item-component', {
        template: '#add-item-template',
        data: function () {
            return {
                newItem: ''
            }
        },
        props:['addItem']
    });

    new Vue({
        el: '#app',
        data: data,
        methods: {
            addItem: function () {
                var text;

                text = this.newItem.trim();
                if (text) {
                    this.items.push({
                        text: text,
                        checked: false
                    });
                    this.newItem = "";
                }
            }
        }
    });

</script>

运行页面时，我在控制台中发现以下错误消息：

[Vue警告]：事件“ click”的无效处理程序：未定义（在组件中找到）

我了解该addItem方法未在add-item-template模板中定义，因此尽管我用作addItem道具，但点击处理程序仍未定义。

现在如何使点击处理程序起作用？

Answer 1

子组件中的单击事件应该在那里处理，如果您想在父组件中查看输出，您应该emit向父组件发送一个事件。在父组件中，您可以监听emitted event并处理它。

var data = {
        items: [{ text: 'Bananas', checked: true }, { text: 'Apples', checked: false }],
        title: 'My Shopping List'
    };

Vue.component('add-item-component', {
    template: '#add-item-template',
    data: function () {
        return {
            newItem: ''
        }
    },
    methods: {
        addItem() {
            const text = this.newItem.trim();
            if(text) {
              // we are emitting an event called "add" and data object {item: this.newItem}
              this.$emit('add', { text });
            }
        }
    }
});



new Vue({
    el: '#app',
    data,
    methods: {
      // here we're handling `add` event from child component with destructured `data` object as a parameter
        addNewItem({text}) {
          data.items.push({
              text,
              checked: false
          });
          console.log(data)
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template id="add-item-template">
        <div class="input-group">
            <input  v-model="newItem" placeholder="add shopping list item" type="text" class="form-control">
            <span class="input-group-btn">
          <button @click="addItem" class="btn btn-default" type="button">Add!</button>
        </span>
        </div>
    </template>

<div id="app" class="container">
    <h2>{{ title }}</h2>
    <!-- here we are listening to the `add` event from the child component -->
    <add-item-component @add="addNewItem"></add-item-component>
    <div v-for="item in items"> {{ item.text }}</div>
</div>