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修饰符只能用于组件而不能用于本机元素。删除修改器修复了问题。我相应地更改了代码。

CODE

＆＃13;

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
        }
    });

＆＃13;

<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>

＆＃13;

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>

vue js - 无法找到子组件模板

1 个答案: