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 修饰符只能用在组件上，不能用在原生元素上。删除修饰符解决了这个问题。我相应地更改了代码。

代码

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>