Vuejs2 组件声明和通信

我在默认的main.js文件中添加了一个组件声明，该文件在Webpack项目创建过程中生成，如下所示：

import Modal from '@/components/Modal'
Vue.component('modal', Modal)

在App.vue中，我有

<modal v-show="showModal"></modal>
<button id="show-modal" v-on:click="showModal = true">Click to have a modal</button>

但是，由于以下原因，它不起作用

Failed to mount component: template or render function not defined.

我尝试过不同的变体，但运气不好

我的第二个问题是子事件如何更改其父数据。例如，在子组件中

<button class="modal-close is-large" v-on:click="closeModal"></button>

如何将其父数据showModal设置为false

更新：

Modal的代码段：

<template>
<div class="signin">
    <div class="modal" v-bind:class="{ 'is-active': isActive }">
        ...
    </div>
    <button class="modal-close is-large" v-on:click="isActive = false"></button>
        </div>
   </div>
</template>

<script>
import axios from 'axios'
import _ from 'lodash'
import Notification from '@/components/Notification'
import { required, email } from 'vuelidate/lib/validators'

export default {
  name: 'signin',
  components: {
    Notification
  },
  data: () => ({
    isActive: true,
    email: '',
    ...
  }),
  ...
}
</script>

...
从“axios”导入axios
从“lodash”导入
从“@/components/Notification”导入通知
从“vuelidate/lib/validators”导入{必需，电子邮件}
导出默认值{
姓名：'签名'，
组成部分：{
通知
},
数据：（）=>({
是的，
电子邮件：“”，
...
}),
...
}

---

Bulma用于造型。在模态中定义了isActive。我认为需要对其进行更改以实现“道具关闭”。

看起来，您的文件

/components/Modal

包含了组件的完整定义：模板和它的脚本部分。因此，您可以将组件绑定到要在标记中使用的标记名：

import Modal from '@/components/Modal'
Vue.component('modal', Modal)

这基本上就是你一开始所拥有的。要将属性传递到此组件，请将

道具

-行直接添加到组件中，即添加到

/components/Modal

：

...
export default {
  name: 'signin',
  components: {
    Notification
  },
  props: ['isActive'],
  data: () => ({
    ...

至于第二个问题，如何与家长沟通，请看一看。基本上，模态组件可以发出“关闭”事件，如下所示：

methods: {
  closeModal: function(event) {
    this.$emit('modalClose')
  }
}

<modal v-bind:isActive="showModal" v-on:modalClose="showModal = false"></modal>

当你使用这个组件时，你可以像这样听它：

methods: {
  closeModal: function(event) {
    this.$emit('modalClose')
  }
}

<modal v-bind:isActive="showModal" v-on:modalClose="showModal = false"></modal>

---

请注意，应使用

v-bind

向isActive提供值。如果不使用

v-bind

，则在创建组件时只传递一次值。这意味着，当父级更改该道具时，该组件将永远不会看到该道具的更改。通过使用

v-bind

，父级对此属性所做的更改被下推到子组件，因此模态实际上可以看到更新的值并对其作出反应。

组件/Modal中的代码是什么样子的？可能你应该在那里定义道具。你能添加模态代码，至少作为一个框架吗？根据你的请求，我为模态添加了一个代码段。我正在努力研究如何只使用一个变量来控制模式显示。谢谢。模态文件是否仅包含模板标记，还是同时包含脚本标记？它是否定义为*.vue文件中的？我通常使用这样的单文件组件，在那里，道具直接在组件定义中定义。因此，使用类似于

Vue.component（'modal'，{props:['isActive']，template:modal}）的内容定义您的组件。

modal组件确实包含一个块。为了简洁起见，我省略了它。我以前试过这个代码。使用main.js中的模态组件声明，我得到一个运行错误：无效的模板选项：[object]。如果我们不得不猜测您的代码是什么样子的，那么很难帮助您。我目前的猜测是，您应该在main.js中编写

Vue.component（'modal'，modal'）

，并在脚本块中定义道具。根据您的请求，我在脚本块中添加了一些相关代码。如果不定义属性，如何将数据传递到组件中？谢谢。这很有效。但是，我得到一个警告：“避免直接改变道具，因为每当父组件重新渲染时，该值将被覆盖。”。相反，使用基于道具值的数据或计算属性。Prop被修改为：“isActive”'我通过在数据声明部分使用isActiveDate:this.isActive并在所有方法中更改数据而不是属性来解决这个问题。再次感谢您的帮助和时间。另一种消除此消息的方法可能类似于关闭事件：发出一个“打开事件”，父级更改属性的值，然后子级可以对此作出反应。

<modal v-bind:isActive="showModal" v-on:modalClose="showModal = false"></modal>