时间戳

首页 > 解决方案 > 在 vue.js 组件模态窗口中传递变量

javascript - 在 vue.js 组件模态窗口中传递变量

问题描述

最初的问题：我在 vue.js 中使用了一个模态窗口，它是从父模块启动的，代码如下：

    <button v-on:click="openModal">Begin</button>
    <Account v-if="showModal" :showModal=showModal></Account>

openModal 函数由以下部分组成：

openModal () {
  this.showModal = true
}

由 vue 组件（名为 Account）组成的模态窗口正在正常打开。但是，我想将一个变量作为参数传递给我的组件，但我不确定如何实现它。

修改后的代码回答了我最初的问题。我在 Account 模块中添加了 :var="var" props 参数。

    <button v-on:click="openModal()">Begin</button>
    <Account v-if="showModal" :var="var" :showModal=showModal></Account>

并且还需要将“var：variable”添加到数据中：

data () {
 return {
   var: variable,
   showModal: false
 }
}

最后，组件中的道具：

props: ['var']

标签： javascriptnode.jsvue.js

解决方案

我不确定您是在尝试将数据传递到组件中还是从组件中获取数据。

如果您将值传递给组件：

Vue.component('account', {
  props: ['data'],
  template: '<h3>{{ data }}</h3>'
})

<account data="some-value"></account>

如果您尝试从组件中发出值：

在你的组件内部

<button v-on:click="$emit('onChildClick', 'some-value')">
  Click me
</button>

当你调用你的组件时

<Account v-if="showModal" :showModal=showModal v-on:onChildClick="getChildValue"></Account>

methods: {
  getChildValue: function (payload) {
    console.log(payload)
  }
}

您可以在本文中了解有关组件之间传递数据的更多信息，请访问https://www.smashingmagazine.com/2020/01/data-components-vue-js/

希望这有帮助。

推荐阅读