javascript - VueJs : use method from root element inside a component

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 警告]:事件“点击”的无效处理程序:未定义
(在组件中找到)

我了解 addItem方法未在 add-item-template 中定义模板等虽然我使用了 addItem作为 Prop ，点击处理程序变为 undefined 。

现在我怎样才能使点击处理程序工作？

Answer 1

子组件中的点击事件应该在那里处理，如果你想在父组件中看到输出，你应该 emit给 parent 的一个事件。在父组件中，您可以收听 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>