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警告]：财产或方法＆＃34; formData＆＃34;未在实例上定义，但在呈现期间引用。通过初始化属性，确保此属性在数据选项或基于类的组件中是被动的。

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

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

错误消失，但随后形式不再被动。我试着效仿这个例子：

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

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

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

Answer 1

当您使用slot时，其范围（其数据来自）是父级。您的广告位的内容是指您在孩子中定义的formData。您可以使用scoped slots

将子数据传递到广告位

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

这个结构：

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

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

父代码：

<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组件的实例并注入el-form-item作为广告位内容。您得到的错误是在该插槽内容中引用formData，因为插槽的上下文是父级。插槽不知道它被注入的内容（除非你使用作用域插槽）。

在更新的代码中：

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

Vuejs属性或方法未在实例上定义，但在呈现期间引用

1 个答案: