了解 Vue 组件和文件上传

Question

更多关于 Vue 组件的阅读。 我不明白 el 属性与组件的名称。

前两个组件只是使用模板。第三个似乎需要'el'属性。它应该指向什么？重新形成？

这给了我onFileChange 未定义：

app.js：

Vue.component('pg-title', {
    template: '<h1>ATS Credits and Debits</h1>'
});
Vue.component('pg-subtitle', {
    template: '<h2>Table:</h2>'
});
Vue.component('form', {
        el: '#app',
        data: {
            fileinput: ''
        },
        methods: {
            onFileChange(e) {
                var files = e.target.files || e.dataTransfer.files;
                if (!files.length)
                    return;
                this.createInput(files[0]);
            },
            createInput(file) {
                var reader = new FileReader();
                var vm = this;
                reader.onload = (e) => {

                vm.fileinput = reader.result;
                }
                reader.readAsText(file);

                console.log(this.fileinput);
            }

        }});

var vm = new Vue({
    el: '#app'
});

index.html:

<pg-title></pg-title>
<pg-subtitle></pg-subtitle>

<form enctype="multipart/form-data">
    <input type="file" @change="onFileChange">
</form>

Answer 1

好吧，只是一些事情

• 创建组件时需要使用template，而不是el。
• 将模板从主文档流中取出，并使用相应的组件标签名称作为元素或使用inline-template 属性。
• 不要将组件命名为与任何标准 html 标记相同的名称。
• 数据应该是一个函数。

Vue.component('v-form', {
        template: '#myform',
        data() {
          return{
            fileinput: ''
          };
        },
        methods: {
            onFileChange(e) {
                var files = e.target.files || e.dataTransfer.files;
                if (!files.length)
                    return;
                this.createInput(files[0]);
            },
            createInput(file) {
                var reader = new FileReader();
                var vm = this;
                reader.onload = (e) => {
                    vm.fileinput = reader.result;
                    console.log(vm.fileinput);
                }
                reader.readAsText(file);
            }
        }
});

new Vue({
  el: '#app',
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>

<div id="app">
  <v-form></v-form>
</div>

<template id="myform">
  <form enctype="multipart/form-data">
      <input type="file" @change="onFileChange">
  </form>
</template>

使用inline-template，从组件中删除template，并像这样定义您的html：

<div id="app">
  <v-form inline-template>
      <form enctype="multipart/form-data">
        <input type="file" @change="onFileChange">
      </form>
  </v-form>
</div>