Vuejs копирование динамических c компонентов методов - PullRequest
Новая
       8

Vuejs копирование динамических c компонентов методов

1 голос
/ 05 марта 2020

Я пытаюсь визуально представить библиотеку компонентов. Я использую Dynami c <component> S для рендеринга каждого компонента. Однако, поскольку я заполняю компонент его слотами, у меня возникают проблемы из-за отсутствия родительских методов.

Я хочу, чтобы компоненты работали (демо), поэтому мне нужно компенсировать, что this.$parent не работает. 

<template>
  <component v-bind:is="'s-' + comp.name" v-bind="props" ref="comp">  <!-- this is the corrent parent-->
    <div v-if="comp.slots">
      <div
        v-for="(slot, i) in comp.slots"
        v-bind:key="i"
        v-bind:slot="slot.name"
      >
        <div v-if="slot.type == 'component'">                         <!-- childs parent -->
          <de-mo v-bind:comp="slot" />                                <!-- this is the child calling a method on the parent -->
        </div>
        <div v-html="slot.value" v-else></div>
      </div>
    </div>
  </component>
</template>

<script>
export default {
  name: 'deMo',
  computed: {
    props() {
      if (this.comp.props) {
        return this.comp.props.reduce((a, r) => {
          a[r.name] = r.value
          return a
        }, {})
      }
    }
  },
  props: {
    comp: {
      type: Object,
      required: true
    }
  },
  methods: this.$ref.comp.methods,                               //<-- this is an error
  mounted(){
    console.log(this.$ref.comp.methods)
  }
},

</script>

<style></style>

1) Есть ли способ скопировать методы из родительского объекта в этот «демонстрационный» компонент через ref attr 2) В качестве альтернативы, есть ли лучший метод для получения тех же результатов?

Спасибо

Ответы [ 2 ]

1 голос
/ 18 марта 2020

вы можете попытаться распространить родительские методы в жизненном цикле beforeCreate, так как в этот момент ваш родитель будет создан, и ваш компонент будет регистрировать все свои методы, 

beforeCreate() {
    this.$options.methods = { ...this.$parent.$options.methods };
  },

, однако вы не можете получить доступ к любым ссылкам. в этом случае ссылки регистрируются только после монтирования компонента.

Примечание. Любая библиотека должна использовать предоставлять и внедрять для взаимодействия со своим компонентом вместо прямой ссылки на родительский компонент.

0 голосов
/ 20 марта 2020

Вы можете использовать Шину событий для связи между компонентами, которые не имеют прямого отношения друг к другу. Кроме того, это рекомендуемый способ связи от ребенка к родителю по Vue.

шине. js

import Vue from 'vue'
export default new Vue()

demo. vue // дочерний компонент, который хочет вызвать метод в родительском 

import Bus from './bus.js'
export default {
 mounted () {
  // [1] child component will emit an event in the bus when it want to call a method of parent 
  Bus.$emit('invoke-parent-fn', 'param')
 }
}

parent. vue // parent компонент, в котором вы хотите визуализировать другие компоненты динамически 

import Bus from './bus.js'
export default {
 methods: {
  fn (param) {
   console.log('// do something ' + param)
  }
 },
 mounted () {
  // [2] parent will be listening to the bus event, when child will emit an event, the handler passed in to the listener will be invoked
  // [3] invoke the required method in the handler
  Bus.$on('invoke-parent-fn', param => this.fn(param))
 }
}
...