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

Vuejs Property or method is not defined on the instance but referenced during render

提问by ci zw

I'm new in VueJS and I am trying to create a custom form component.

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

I am using http://element.eleme.ioelements. So I created a new Form.vue file

我正在使用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>

Here is my app.js

这是我的 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
  }
});

And here is my view:

这是我的观点：

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

But I get this error in the console:

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

[Vue warn]: Property or method "formData" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

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

I know that if I change Vue object to this:

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

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

the error disappears, but then form is not reactive any more. I tried to follow this example:

错误消失了，但形式不再是反应性的。我试图按照这个例子：

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

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

and my markup is actually the same, but when I use Vue dev tools, I can see that my formData variable inside my Form.vue component is different from the shared formData variable in my Vue instance.

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

My question would be how can I make <el>elements use formData from my Form component that I created?

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

采纳答案by Roy J

When you use a slot, its scope -- where its data comes from -- is the parent. The contents of your slot refer to formData, which you define in the child. You can pass child data to slots using scoped slots

当您使用 a 时slot，它的范围——它的数据来自哪里——是父级。您的插槽的内容是指formData您在子项中定义的。您可以使用作用域插槽将子数据传递给插槽

Alternatively, you could fully define formDatain the parent and pass it as a propto the child, which passes it on as a prop to el-form.

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

This structure:

这种结构：

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

has you passing formDatafrom your Formcomponent to the el-formcomponent. It does not pass to the slot. Slots are not children, they are injected code from the parent.

你有没有formData从你的Form组件传递到el-form组件。它不会传递到插槽。插槽不是子节点，它们是从父节点注入的代码。

The parent code:

父代码：

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

is creating an instance of your Formcomponent and injecting an el-form-itemas slot content. The error you are getting is in referring to formDatain that slot content, because the slot's context is the parent. A slot does not know anything about what it's being injected into (unless you use scoped slots).

正在创建Form组件的实例并注入el-form-itemas 插槽内容。您得到的错误是在formData该插槽内容中引用的，因为该插槽的上下文是父级。插槽对其注入的内容一无所知（除非您使用作用域插槽）。

In the updated code:

在更新的代码中：

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

You are passing a dataprop to the Formchild here, but trying to use it in the slot content. the el-inputis looking in the parent for data. Try this:

您正在此处将data道具传递给Form孩子，但尝试在插槽内容中使用它。在el-input正在父的data。试试这个：

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

and

和

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