不同页面的vue js调用方法函数

Question

嘿，我是 VUE 的新手，对于这个项目，我在一个页面上有一个按钮，它应该触发或调用另一个页面的功能。每个人都会像为什么你不在同一页面上拥有按钮和功能，因为我正在尝试学习如何调用不同页面的功能的基本部分，然后在我的项目中实现。我在问问题的时候试图让它更容易和清楚。

当我从 homePage.vue 调用 chairPage.vue 的方法函数时，它会抛出一个错误，提示 world not defined on homePage.vue。任何人都可以解释为什么我会收到此错误以及解决此问题的最佳方法是什么。

我有两个页面，一个是 homePage.vue，另一个是 chair.Vue。我在 homePage.vue 上有一个按钮，它应该调用 chairPage.vue.

的方法函数

首页

<template>
   <div id="homepage">
     <b-button variant="info" @click="buttonClicked()">Click</b-button>

     <chairComponent ref="world"/>

   </div>
</template>

<script>
  import chairComponent from '@/components/chair.vue';

  export default {
  props: [],
  
  methods:{
    buttonClicked(){
      this.$refs.world.hello();
    }
  }

  }
</script>

主席页面

<template>
   <div id="chairComponent">
      <p v-if="displayText == '1'"> HELLO WORLD </p>
   </div>
</template>

<script>
  export default {
    props: ['world'],
    data(){
      return{
        displayText:'',
      }
    },
    methods:{
      hello(){
        console.log('inside child component hello function');
        this.displayText = '1';
      }
    }
  }
</script>

Answer 1

你可以在 props 上传递 props to your child component, and there watch 并调用函数：

Vue.component('Chair', {
  template: `
    <div id="chairComponent">
      <p v-if="displayText == '1'"> HELLO WORLD </p>
   </div>
  `,
  props: ['world'],
  data(){
   return{
    displayText:'',
   }
  },
  methods:{
    hello(){
      console.log('inside child component hello function');
      this.displayText = '1';
   }
  },
  watch: {
    world() {
      if (this.world) this.hello()
    }
  }
})

new Vue({
  el: '#demo',
  data() {
    return {
      val: null
    }
  },
  methods:{
    buttonClicked(){
      this.val = true
      setTimeout(() => {this.val = false},0)
    }
  }
})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="demo">
 <div id="homepage">
   <b-button variant="info" @click="buttonClicked">Click</b-button>
   <chair :world="val" />
 </div>
</div>

Answer 2

你可以 $emit 从 children 到 parent https://vuejs.org/v2/guide/components-custom-events.html

Child

hello () {
  ...//yours code
  this.$emit('customEvent', someValue)
}

Parent

<template>
  <child 
    @cutomEvent="function"
  />
<template>

Answer 3

它在下面的代码片段中工作得很好

Vue.component('Chair', {
  template: `
    <div id="chairComponent">
   </div>
  `,
  data(){
   return{
    displayText:'',
   }
  },
  methods:{
    hello(){
      console.log('inside child component hello function');
   }
  },
})

new Vue({
  el: '#demo',
  methods:{
    buttonClicked(){
      this.$refs.world.hello();
    }
  }
})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="demo">
 <div id="homepage">
   <b-button variant="info" @click="buttonClicked">Click</b-button>
   <chair ref="world" />
 </div>
</div>

我想在 homepage.vue 中添加组件部分可能会起作用

<template>
   <div id="homepage">
     <b-button variant="info" @click="buttonClicked()">Click</b-button>

     <chairComponent ref="world"/>

   </div>
</template>

<script>
  import chairComponent from '@/components/chair.vue';

  export default {
  props: [],
  // New changes added below 
  components: {
    chairComponent
  },
  methods:{
    buttonClicked(){
      this.$refs.world.hello();
    }
  }
  }
</script>

不同页面的vue js调用方法函数

Vue js call method function of different page

javascript

components

vue.js

vuejs2