Question

这是一个脚本，我尝试导入组件并在模板中使用其依赖项。换句话说，我想在FooComponent的模板中本地注册一个组件SharedComponent并使用BarComponent。在角度2中 - 一个注册模块并访问该模块的所有deps。你会如何在vue中实现这样的东西？

＆＃13;

    const SharedComponent = {
      template: '<div>Shared component!</div>'
    }
    const FooComponent = new Vue({
      components: {
        'app-shared': SharedComponent 
      }
    })
    const BarComponent = new Vue({
      el: '#outlet',
      template: '<app-shared></app-shared>',
      components: {
        'foo-component': FooComponent 
      }
    })

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
<div id="outlet"></div>

＆＃13;

Answer 1

与Angular相比，这不是Vue的工作原理。您无法在另一个实例中创建Vue实例（您的FooComponent）组件。此外，为了在模板中使用组件，您需要直接导入它。

所以，你可以：

让FooComponent只是一个组件，而不是一个实例，并执行以下操作：

const SharedComponent = { //component
  template: '<div>Shared component!</div>'
}
const FooComponent = { // component
  template: '<app-shared></app-shared>', // you import it here, so you can use it inside a template
  components: {
    'app-shared': SharedComponent 
  }
}
const BarComponent = new Vue({ // instance
  el: '#outlet',
  template: '<foo-component></foo-component>', // again, use the component which you've imported
  components: {
    'foo-component': FooComponent 
  }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="outlet"></div>

直接使用SharedComponent：

const SharedComponent = {
  template: '<div>Shared component!</div>'
}

const BarComponent = new Vue({
  el: '#outlet',
  template: '<app-shared></app-shared>',
  components: {
    'app-shared': SharedComponent 
  }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="outlet"></div>

如何导入组件及其所有deps？

1 个答案: