Question

给定一个组件：

Vue.component('my-comp', {
  props: ['input'],
  watch: { input: function(){...} },
});

以下是什么编程方法？

<my-comp :input="map[key]"></my-comp> map[key] change triggers watch

我试过了：

new (Vue.component('my-comp'))({
  propsData: { input:map[key] }, // map[key] change doesn't trigger watch
});

这样做的上下文是将零对多组件插入到markdown生成的HTML中。我为每个组件调用.$mount()，并在重新呈现markdown时使用本机DOM replaceChild()调用移动其节点。另请参阅Vue components in user-defined markdown

Answer 1

render function是创建和插入组件的编程方法。将new与propsData一起使用primarily for unit testing，其中组件不一定具有Vue实例作为父级。

$mount没有建立父子关系，它只是将组件独立安装到DOM。您需要设置父子道具管理。

Vue.component('my-comp', {
  template: '<div>{{ input }}</div>',
  props: ['input']
});

new Vue({
  el: '#app',
  data: {
    thingy: 5,
    child: null
  },
  created() {
    this.child = new(Vue.component('my-comp'))({
      propsData: {
        input: this.thingy
      }
    });
    this.$watch('thingy', (newValue) => this.child.$props.input = newValue);
    setInterval(() => ++this.thingy, 2000);
  },
  mounted() {
    this.child.$mount(this.$el);
  }
});

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <div>

Answer 2

如果prop输入是原始值，我们必须像Roy J建议的那样用child.$props.input = x操纵组件，但在这种情况下我们需要input = map[key]。因此这个解决方案：

Vue.component('my-comp', {
  props: ['map','key'],
  computed: { input: function() { return this.map[this.key] } },
  watch: { input: function(a, b) {...} }, // triggered on map[key] change
});

new (Vue.component('my-comp'))({
  propsData: { map:theMap, key:theKey }, // theMap must be reactive
});

程序化组件

2 个答案: