主页 / 问题 / 859938
Accepted
ruslik
Asked:2020-07-25 15:03:36 +0000 UTC2020-07-25 15:03:36 +0000 UTC

VueJS 2如何将父级中的数据绑定到子级（组件）

  • 772
Vue.component('range-slider', {
    props: ['name', 'min', 'max'],
    template: '<div class="form-group"> ' +
                    '<label class="control-label">{{name}}</label>' +


                    '<input type="text" class="form-control" v-model="value(тут value это initialPayment, либо monthyPayment)" v-on:keypress="isNumber($event)"> ' +
                    '<vue-slider ref="slider"' +
                        'v-model="value"' +
                        ':tooltip="false"'+
                        ':min="parseInt(min, 10)"' +
                        ':max="parseInt(max, 10)">' +
                    '</vue-slider>' +
              '</div>',
    components: {
        'vueSlider': window[ 'vue-slider-component' ]
    }
});

new Vue({
    el: '.app',
    data: {
        initialPayment: 10,
        monthyPayment: 0,
    }
});

<div class="app">
    <range-slider 
      name="Текст" 
      min="10"
      max="1000"
      // Как то передать initialPayment>
   </range-slider>

    <range-slider 
      name="Текст" 
      min="10"
      max="1000">
      // Как то передать monthyPayment
    </range-slider>
</div>

有必要将父数据与表示为组件的子数据连接起来。或者更确切地说，在组件内部输入。并且当输入中的数据发生变化时，父块了解发生了什么变化，例如初始支付，并开始某种重新计算或计算

vue.js

1 个回答

  1. Best Answer

    为此目的，有一个以Vue他的名字命名的事件生成器EventBus。在项目中，您可以创建一个文件夹events和一个文件index.ts来定义这个生成器：

    export const $bus = new Vue();

    或者，如果您在没有任何模块构建器的情况下工作 - 在原型中定义此生成器Vue：

    Vue.prototype.$bus = new Vue();

    在子组件模板中，在输入上挂一个事件处理程序：

    <input name="initialPayment" @keyup="changeInitialPayment($event.target.value)">

    在组件中，我们定义了这个方法并生成了一个事件：

    methods: {
    changeInitialPayment(value) {
        this.$bus.$emit('changeInitialPayment', value);
    }
}

    在父级监听事件changeInitialPayment：

    mounted() {
    this.$bus.$on('changeInitialPayment', (value) => {
        console.log(value);
        // Делайте что-то с новым значением `initialPayment`
    });
}
    • 1

相关问题