使用按钮单击另一个 vue 组件或 html 按钮单击在不同页面中获取 vue 组件答案

【问题标题】：get vue component in different page with button click on another vue component or html button click使用按钮单击另一个 vue 组件或 html 按钮单击在不同页面中获取 vue 组件
【发布时间】：2020-12-23 18:18:41
【问题描述】：

我想通过点击html按钮在不同的页面加载一个vue组件。

-HTML 按钮

<a class="contentButton ml-n5" id="addCategoryPrice">Add Price<i class="fa fa-plus-circle"></i></a>

-Vue 组件

<add-price></add-price>

如果这是不可能的，那么有没有办法通过按钮单击另一个 vue 组件来获取不同页面中的 vue 组件。

【问题讨论】：

您可以使用 vuex 与 btw 组件进行通信。 vuex.vuejs.org/guide
可以使用原生点击Vue组件。 <add-price @click.native="functionHere"></add-price> 。如果不是这种情况，请提供更多信息。您也可以将 hrefLink 作为道具传递给 add-price 组件。您可以免费使用其中之一 :)
@WebMan 你将无法像这样与另一个页面通信
我想通过单击 HTML 按钮来获取 vue 组件，并且该组件应该出现在不同的页面上

标签： php laravel vue.js

【解决方案1】：

作为我的研发部门，没有重定向到不同页面的解决方案。因此我决定通过在 vue 组件中单击按钮来隐藏现有页面的内容，并通过单击按钮来显示我想要的内容。

-在blade中获取Vue组件

<div id="vue-app">
    <add-price>

    </add-price>
</div>

-Vue组件

#ListTable（页面现有内容的ID）

<template>
  <div class="container">
    <a class="contentButton ml-n5" id="addPrice" @click="addPrice">Add Price<i class="fa fa-plus-circle"></i></a>
  </div>
</template>

<script>
export default {
name: "AddPrice",
  data() {
    return {
      isShow: false
    }
  },
  methods: {
    addPrice: function (){
      let x = $('#ListTable');
      x.hide();
      this.isShow = true;
    }
  }
}
</script>

谢谢大家！

【讨论】：