在 vue.js 組件模態中傳遞一個變量 Window

Question

初始問題：我在 vue.js 中使用模態 window，它是使用以下代碼從父模塊啟動的：

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

openModal function 由以下部分組成：

openModal () {
  this.showModal = true
}

模態 window 由一個 vue 組件（名為 Account）組成，正在正常打開。 但是，我想將一個變量作為參數傳遞給我的組件，但我不確定如何實現它。

修改后的代碼回答了我最初的問題。 我已將 :var="var" props 參數添加到 Account 模塊。

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

並且還需要將“var：變量”添加到數據中：

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

最后，組件中的道具：

props: ['var']

Answer 1

我不確定您是在嘗試將數據傳遞到組件中還是從組件中獲取數據。

如果您將值傳遞給組件：

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/

希望這有幫助。