javascript - vue js - 找不到子组件模板

Question

阅读完 vue.js 文档后，我直接进入组件领域。
我想创建一个自定义(本地)输入组件，在 keyup 上向父级发出事件，但我有两个问题。 (参见文章末尾的代码示例)

[已解决] 1. 当我注册子组件时，我已经收到错误

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <InputTest>
       <Root>

我想这完全是理所当然的，但我就是不明白。

[已解决]2.子事件甚至没有触发
在抽象和简化这个问题的代码之前，我尝试使用单文件(.vue)组件创建相同的行为。使用 SFC，模板可以成功编译/安装，但子组件事件不会触发。显然，我无法确定这个问题是否也会出现在我提供的示例中，但我猜是这样。

编辑 1:解决问题 1
我的子组件应该是一个对象而不是 vue 实例。我为此更新了代码。我还将 onChange 方法从 lambda 更改为 function，因为 this 并不指向 lambda 中的 vue 实例。

编辑 2:解决问题 2

There may be times when you want to listen for a native event on the root element of a component.

显然，native 修饰符只能用在组件上，而不能用在 native 元素上。删除修改器解决了问题。我相应地更改了代码。

代码

const inputText = {
        data () {
            return {
                model: ''
            }
        },
        template: '<input type="text" v-model="model" @keyup="onChange">',
        methods: {
            onChange: function () {
                this.$emit('update', this.model);
            }
        }
    };

    const app = new Vue({
        el: '#app',
        data () {
            return {
                txt: ''
            }
        },
        methods: {
            onUpdate: function(txt) {
                this.txt = txt;
            }
        },
        components: {
            'input-text': inputText
        }
    });

<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>

<div id="app">
    <input-text @update="onUpdate"></input-text><br>
    {{ txt }}
</div>

Answer 1

你不需要两个 vue 实例。您可以将组件创建为简单对象并在 vue 实例中使用它

const inputText =  {
  template: '<div> <input type="text" @keyup.native="onChange"> </div>',
  methods: {
    onChange: () => {
      console.log('onChange');
      this.$emit('update')
    }
  }
  
  }
 

const app = new Vue({
  el: '#app',
  template: '<input-test @keyup.native="onKeyup" @update="onUpdate"></input-test>',
  methods: {
    onUpdate: () => console.log('onUpdate'),
    onKeyup: () => console.log('onKeyup')
  },
  components: {
    'input-test': inputText
  }
});

<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
<div id="app"></div>