javascript - Vuejs 属性或方法未在实例上定义，但在渲染期间被引用

Question

我是 VueJS 的新手，我正在尝试创建一个自定义表单组件。

我正在使用 http://element.eleme.io元素。所以我创建了一个新的 Form.vue 文件

<template>
    <el-form :model="data">
        <slot></slot>
    </el-form>
</template>

<script>
  import { FormItem, Input } from 'element-ui';
  export default {
    name: 'general-form',
    components: {
        FormItem,
        Input
    },
    props: ['data'],
    mounted: function() {
        console.log(this.data);
    }
  }

</script>

这是我的 app.js

// Element.io
import { Form, FormItem, Input } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// Custom
import GeneralForm from '../../components/presentational-subsystem/form/Form.vue';

Vue.use(Form);
Vue.use(FormItem);
Vue.use(Input);

Vue.config.devtools = true;

var contactsPage = new Vue({
  el: '#contacts-page',
  components:  {
    GeneralForm
  }
});

这是我的观点:

<div id="contacts-page">

<general-form id="contacts-form" :data="{subject: 'abc'}" action="/contacts" method="post">
  <el-form-item label="Subject" prop="subject">
    <el-input v-model="data.subject"></el-input>
  </el-form-item>       
</general-form>

</div>

但我在控制台中收到此错误:

[Vue 警告]:属性或方法“formData”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保该属性在数据选项中或对于基于类的组件是 react 性的。

我知道如果我将 Vue 对象更改为:

var contactsPage = new Vue({
  el: '#contacts-page',
  data: { formData: {} }
  components:  {
    GeneralForm
  }
});

错误消失了，但是表单不再有反应。我试着按照这个例子:

http://element.eleme.io/#/en-US/component/form

我的标记实际上是相同的，但是当我使用 Vue 开发工具时，我可以看到我的 Form.vue 组件中的 formData 变量与我的 Vue 实例中的共享 formData 变量不同。

我的问题是如何制作 <el>元素使用我创建的 Form 组件中的 formData？

Answer 1

当你使用一个slot时，它的范围——它的数据来自哪里——是父级。您的插槽内容引用您在子项中定义的 formData。您可以使用 scoped slots 将子数据传递给插槽

或者，您可以在父级中完全定义 formData 并将其作为 prop 传递给子级，子级将其作为 prop 传递给 el-形式。

这个结构:

<el-form :model="formData">
    <slot></slot>
</el-form>

您是否将 formData 从 Form 组件传递给 el-form 组件。它不会传递到插槽。插槽不是子项，它们是从父项注入(inject)的代码。

父代码:

<general-form id="contacts-form" action="/contacts" method="post">
  <el-form-item label="Subject" prop="subject">
    <el-input v-model="formData.subject"></el-input>
  </el-form-item>       
</general-form>

正在创建您的 Form 组件的实例，并注入(inject)一个 el-form-item 作为插槽内容。您得到的错误是在该插槽内容中引用 formData ，因为插槽的上下文是父级。插槽不知道它被注入(inject)的是什么(除非您使用作用域插槽)。

在更新的代码中:

<general-form id="contacts-form" :data="{subject: 'abc'}" action="/contacts" method="post">
  <el-form-item label="Subject" prop="subject">
    <el-input v-model="data.subject"></el-input>
  </el-form-item>       
</general-form>

您正在将 data 属性传递给此处的 Form 子级，但试图在插槽内容中使用它。 el-input 正在父级中查找 data。试试这个:

var contactsPage = new Vue({
  el: '#contacts-page',
  data: {
    data: { subject: 'abc' }
  },
  components:  {
    GeneralForm
  }
});

和

<general-form id="contacts-form" :data="data" action="/contacts" method="post">
  <el-form-item label="Subject" prop="subject">
    <el-input v-model="data.subject"></el-input>
  </el-form-item>       
</general-form>