3 

Vue.config.devtools = false
Vue.config.productionTip = false
let modal = Vue.extend({
  template: `
<div class="modal">
  <p>Balance: {{ balance }}</p>
  <input @input="$emit('input', $event.target.value)" :value="value">
  <button @click="$emit('input', balance)">ALL</button>
</div>
`,
  props: ['balance', 'value']
})

function makeComponent(data) {
  return { render(h) { return h(modal, data) } }
}

Vue.component('app', {
  template: `
<div>
  <p>Balance: {{ balance }}</p>
  <p>To withdraw:  {{ withdrawAmount }}</p>
  <p>Will remain: {{ balance - withdrawAmount }}</p>
  <button @click="onClick">Withdraw</button>
  <modal-container ref="container"/>
</div>`,
  data () {
    return {
      withdrawAmount: 0,
      balance: 123
    }
  },
  methods: {
    onClick () {
      this.$refs.container.show(makeComponent({
        props: {
          balance: String(this.balance),
          value: String(this.withdrawAmount)
        },
        on: {
          input: (value) => {
            this.withdrawAmount = Number(value)
          }
        }
      }))
    }
  }
})

Vue.component('modal-container', {
  template: `
<div>
   <component v-if="canShow" :is="modal"/>
</div>
`,
  data () {
    return { modal: undefined, canShow: false }
  },
  methods: {
    show (modal) {
      this.modal = modal
      this.canShow = true
    },
    hide () {
      this.canShow = false
      this.modal = undefined
    }
  }
})


new Vue({
  el: '#app'
})
.modal {
  background-color: gray; 
  width: 300px; 
  height: 100px; 
  margin: 10px;
  padding: 10px;
}

* {
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  color: #2c3e50;
  line-height: 25px;
  font-size: 14px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script>
<div id="app">
  <app></app>
</div>
这是我们使用vue-js-modal的应用程序的简化版本。基本思想是我们将组件声明与所需的VNodeData一起传递给插件函数，并将该组件附加到具有适当数据绑定的预定义 DOM 点。

我们的用例是：

  1. 用户点击“提款”
  2. 弹出带有输入字段和显示用户余额的静态字段的模态
  3. 用户输入他/她想要提取的金额，该金额和结果余额显示在被调用方组件中。

除了输入字段外，还有一个“全部”按钮，用户可以轻松输入等于他/她余额的数字

问题：当用户单击“ALL”时，“modal”组件会触发一个带有余额值的“input”事件，并且被调用组件接收该事件并更新其“withdrawAmount”。但是 'withdrawAmount' 应该作为 'value' 属性传递回 'modal' 并进一步更新输入字段，这不会发生。

4

0 回答 0