来自父更新的 Vue 组件反应性 V 模型

Question

我正在努力尝试将 Jquery 插件添加到 Vue 组件中。我有其他一切工作，但我不知何故需要检测 v-model 值何时从子组件的父级更改。例如，如果 vue 应用程序中的其他内容更改了子组件上的绑定值，我需要运行一些特定代码。到目前为止，这是我无法弄清楚如何具体检测到这一点：

Vue.component(
            'c5-page-selector',
            {
                template: '<div class="page-selector"></div>',
                prop: ['value'],
                mounted: function () {
                    let self = this;
                    $(this.$el).concretePageSelector({inputName: 'test', cID: this.value});
                    $(this.$el).find('.ccm-item-selector-clear').click(function () {
                        self.updatePage();
                    });

                    $(this.$el).click(function () {
                        self.updatePage();
                    });
                    Concrete.event.bind('ConcreteSitemap', function(e, instance) {
                        var instance = instance;
                        Concrete.event.bind('SitemapSelectPage', function(e, data) {
                            if (data.instance == instance) {
                                self.updatePage();
                            }
                        });
                    });
                },
                methods: {
                    updatePage() {
                        let value = $(this.$el).find('input').val();
                        if (value && value.length && value != 0) {
                            value = parseInt(value, 10);
                        } else {
                            value = null;
                        }
                        this.$emit('input', value)
                    }
                }
            }
        );

Answer 1

computed: {
  yourDesiredVariable: {
     get() {
       return this.value
     },
     set(val) {
       this.$emit('input', val)
     }
  }
}

尝试在 DOM

中输出 yourDesiredValue

来自父更新的 Vue 组件反应性 V 模型

Vue Component Reactive V-Model from parent update

vue.js

vue-component