Vue.JS - 微前端方法

1 回答

• 5

  1）是否可以使用标准vue工具基于vue创建复合UI（微前端）？

  对的，这是可能的 . 几乎所有您发布的独立组件（https://github.com/sagalbot/vue-select，https://github.com/NightCatSama/vue-slider-component）甚至完整"sets"组件（例如vuetify，https://github.com/bootstrap-vue/bootstrap-vue，vue-material）都是使用标准vue工具开发的可重用（可组合）组件的示例 .

  2）我们有多个页面，因此我们需要一个从一侧导航到另一侧的解决方案 . 我们如何实现页面转换？

  vue-router是这项工作的工具 . 它由核心团队开发，因此期望紧密集成和强大的功能支持 .

  3）是否可以在VueJS组件之间 Build 事件总线？

  每个Vue实例都实现events interface . 这意味着要在两个Vue实例或组件之间进行通信，您可以使用Custom Events . 您也可以使用Vuex（见下文） .

  4）我们如何实现组件之间的双向通信？

  发送 data from parent component to child is using props 的最佳方式 . 步骤：（1）在孩子中声明 props （数组或object）; （2）通过 <child :name="variableOnParent"> 将其传递给孩子 . 见下面的演示 .

  Vue.component('child-comp', {
    props: ['message'], // declare the props
    template: '<p>At child-comp, using props in the template: {{ message }}</p>',
    mounted: function () {
      console.log('The props are also available in JS:', this.message);
    }
  })
  
  new Vue({
    el: '#app',
    data: {
      variableAtParent: 'DATA FROM PARENT!'
    }
  })
  

  <script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script>
  
  <div id="app">
    <p>At Parent: {{ variableAtParent }}</p>
    <child-comp :message="variableAtParent"></child-comp>
  </div>
  

  您还可以获取 references Child Components (refs)并在其上调用方法 .

  Vue.component('my-comp', {
    template: "#my-comp-template",
    props: ['name'],
    methods: {
      saveMyComp() {
        console.log('Saved:', this.name);
      }
    }
  })
  
  new Vue({
    el: '#app',
    data: {
      people: [{name: 'Bob'}, {name: 'Nelson'}, {name: 'Zed'}]
    },
    methods: {
      saveChild(index) {
        this.$refs.myComps[index].saveMyComp();
      }
    }
  });
  

  <script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script>
  
  <div id="app">
    <div v-for="(person, index) in people">
      <button @click="saveChild(index)">saveMyComp</button>
      <my-comp :name="person.name" ref="myComps"></my-comp>
    </div>
  </div>
  
  <template id="my-comp-template">
      <span> {{ name }} </span>
  </template>
  

  要传达 from child to parent ，您将使用events . 见下面的演示 . 还有several modifiers使这项任务更容易 .

  var parent = {
    template: '<div><child :content.sync="localContent"></child><br>At parent: {{ localContent }}</div>',
    props: ['content'],
    data() {
      return {
        localContent: this.content
      }
    }
  };
  
  var child = {
    template: '<div>At child: {{ content.value }}<button @click="change">change me</button></div>',
    props: ['content'],
    methods: {
      change() {
        this.$emit('update:content', {value: "Value changed !"})
      }
    }
  };
  
  Vue.component('child', child);
  Vue.component('parent', parent);
  
  new Vue({
    el: '#app'
  });
  

  <script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
  
  <div id="app">
    <parent :content="{value:'hello parent'}"></parent>
  </div>
  

  但是，不可避免地，随着应用程序的增长，您将不得不使用更具可扩展性的方法 . 在这种情况下，Vuex是事实上的解决方案 . 粗略地说，当使用Vuex时，您不必将状态从父级传递给子级：所有这些都将从Vuex存储中获取它（一种"global"反应变量） . 这极大地简化了应用程序管理，值得自己发布 .

  Final note ：正如您所看到的，Vue的一个巨大优势是您可以轻松地进行原型设计和测试功能 . 没有构建步骤，对原始JS的抽象很少 . 与其他框架相比，我认为这是一个重要的奖励 .

  回复于 2024-04-27T06:50:14+08:00