从父组件

Question

是否可以从“父元素”调用导入组件中的函数？因为我有一些模块，我想在我的应用程序中，并在我的应用程序中动态显示它们。我虽然在主Header文件夹中导入了App.vue之类的组件，但它会识别主App.vue文件夹中的功能。

App.vue的示例：

<template>
  <div>
    <div class="m-grid m-grid--hor m-grid--root m-page">
        <!-- <loader></loader> -->
        <mobile-menu-partial></mobile-menu-partial>
        <header-partial></header-partial>
            <div :is="currentComponent"></div>
            <div v-show="!currentComponent" v-for="component in componentsArray" :key="component.id">
                <button @click="swapComponent(component)">{{component}}</button>
            </div>
            <button @click="swapComponent(null)">Close</button>
        <footer-partial></footer-partial>
    </div>
  </div>
</template>

<script>
import Loader from '@/components/partials/Loader.vue'
import MobileMenu from '@/components/partials/MobileMenu.vue'
import Header from '@/components/partials/Header.vue'
import Footer from '@/components/partials/Footer.vue'
export default {
  data () {
    return {
      currentComponent: null,
      componentsArray: ['dashboard', 'schedule', 'locations', 'mileage']
    }
  },
  name: 'App',
  components: {
    'loader': Loader,
    'mobile-menu-partial': MobileMenu,
    'header-partial': Header,
    'footer-partial': Footer
  },
  methods: {
    swapComponent: function (component) {
      console.log('component', component)
      this.currentComponent = component
      if (component === null) {
        console.log('anywhere_main')
        this.$router.push('/')
      } else {
        this.$router.push('/' + component)
      }
    }
  }
}
</script>

<style>
</style>

我可以访问swapComponent中的header-partial函数吗？因为有我的模块可以打开。

Answer 1

从父组件

调用子组件的方法

假设您有一个child-comp组件，并希望从父级调用其childMethod方法。

在父亲的模板上使用ref="someVariableName"，在父亲的JavaScript上使用this.$refs.someVariableName。

父母的模板：

<div id="app>
   <child-comp ref="myChild"></child-comp>
   <button @click="callChildMethod">GO</button>
</div>

家长的JavaScript代码：

{
  data: // ...
  // ...
  methods: {
    callChildMethod: function () {
      this.$refs.myChild.childMethod();
    }
}

从孩子

调用父方法

在<child-comp>中发出一个事件并在父母身上收听。

父母的模板（听取事件）：

<div id="app>
   <child-comp @eventname="parentsMethod"></child-comp>
</div>

请注意@eventname="parentsMethod"与v-on:eventname="parentsMethod"相同。

家长的JavaScript代码：

{
  data: // ...
  // ...
  methods: {
    parentsMethod: function (event) {
      console.log('parent called', event);
    }
}

Child的JavaScript代码：

{
  data: // ...
  // ...
  methods: {
    someChildMethod: function () {
      this.$emit('eventname', {some: 'object value'});
    }
}

现在，无论何时，在孩子身上，你都会调用someChildMethod，它会触发事件，因为父母正在听它，所以它会在父母身上执行parentsMethod。

从父元素点击时调用导入的子组件中的函数？

1 个答案:

从父组件

从孩子