Question

我有这些组成部分：

<template id="test-button-component">
    <div class="test-button__container">
        This is test button
        <button @click="clickButton">{{buttonTitle}}</button>
    </div>
</template>

<template id="test-button-component2">
    <div class="test-button__container">
         <button></button>
    </div>
</template>

我尝试使用Vue的:is绑定按名称进行组件绑定，如下所示：

<div :is='myComponentName' ></div>

每次myComponentName更改为其他组件时，新组件都会替换旧组件。我需要的是，有什么办法可以获取组件的实例，以便获取当前绑定的组件的视图模型实例？

Answer 1

您可以为动态组件的ref="custom"标签添加ref attribute（例如<div>）。然后通过this.$refs.custom引用组件实例。

这是一个简单的示例，只要绑定到is道具的值发生更改，就会记录组件的数据：

new Vue({
  el: '#app',
  data() {
    return { 
      value: 'foo',
      children: {
        foo: { 
          name: 'foo',
          template: '<div>foo</div>',
          data() { 
            return { value: 1 };
          }
        },
        bar: {
          name: 'bar',
          template: '<div>bar</div>',
          data() { 
            return { value: 2 };
          }
        }
      }
    }
  },
  computed: {
    custom() {
      return this.children[this.value];
    }
  },
  watch: {
    custom() {
      this.$nextTick(() => {
        console.log(this.$refs.custom.$data)
      });
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <select v-model="value">
    <option>foo</option>
    <option>bar</option>
  </select>
  <div :is="custom" ref="custom"></div>
</div>

请注意，$data用于组件引用的$refs.custom已记录在$nextTick handler内部。这是因为绑定的组件在重新渲染父视图之前不会更新。

我如何从Vue的：is获取ViewModel

1 个答案: