Question

我的文件看起来像这样

/**
 * Get the user by e-mail.
 *
 * @param  string  $email
 * @param  string  $table
 * @return stdClass
 *
 * @throws \Jrean\UserVerification\Exceptions\UserNotFoundException
 */
protected function getUserByEmail($email, $table)
{
    $user = DB::table($table)
        ->where('email', $email)
        ->first();

    if ($user === null) {
        throw new UserNotFoundException();
    }
    $user = (object)$user;
    $user->table = $table;

    return $user;
}

我在main.js中的vue实例

./components/UserCreate.vue
./components/UserList.vue
./main.js

的index.html

new Vue({
  el: '#user-operations',
  components: {
      CreateUser,
      UserList
  }
});

我想在 CreateUser.vue中的 createUser（）方法中触发 UserList.vue 中的 userList（）方法被触发。或者如何从 CreateUser.vue 将last_user属性传递给 UserList组件以进行追加。

这是我的创建用户组件[working]

https://jsfiddle.net/epp9y6vs/

这是我的用户列表组件[working]

https://jsfiddle.net/ore3unws/

所以我希望在触发createUser（）时列出最后一个用户

Answer 1

我建议使用操作用户实体的所有方法创建服务。它会将您的组件与逻辑的实现区分开来，因为： 1.组件不必知道他们必须对服务器执行哪些调用来检索数据 - 使用抽象级别更好 2.组件更轻，更易于重复使用 3.您将能够在几个组件中使用此逻辑（来自服务） - 完全是您的问题

您有多种方法可以实施服务：

无国籍服务：那么你应该使用mixins
Statefull服务：使用Vuex
从vue代码导出服务和导入
任何javascript全局对象

我更喜欢（4）。以下是如何执行此操作的示例：

在描述您的服务的文件/services/UsersService中放置所有相关方法并使用导出公开它们：

import axios from 'axios'

export default {
  get() {
    return axios.get('/api/posts)
  }
}

然后在需要此方法的任何组件中导入此服务：

import UsersService from '../services/UsersService'

export default {
  data() {
   return {
     items: []
   }
  },
  created() {
   this.fetchUsers()
  },
  methods: {
   fetchUsers() {
    return UsersService.get()
      .then(response => {
        this.items = response.data
      })
   }
  }
}

在这个问题中找到更多关于它的信息： here

这个解决方案比使用this.$parent.$refs.userList要好得多，因为.table > tbody > tr > td:nth-child(1) { position: absolute; display: inline-block; background-color: #D4D4D4; width:40px; /*height: 100%;*/ } .table > tbody > tr > td:nth-child(2) { position: absolute; display: inline-block; background-color: #D4D4D4; width:80px; left:40px; /*height: 100%;*/ }假设这些组件将始终保持＆＃34;兄弟＆＃34; （将拥有相同的父母）。

Answer 2

您可以通过以下代码触发userList中的CreateUser.vue：

this.$parent.$refs.userList.userList()

并更改您的index.html：

<div id="user-operations">
  <create-user></create-user>
  <user-list :ref="userList"></user-list>
</div>

您可以在last_user中创建main.js属性，然后将其传递给2个组件：

<div id="user-operations">
  <create-user:lastUser="last_user"></create-user>
  <user-list :lastUser="last_user"></user-list>
</div>

vue js触发其他组件方法

2 个答案: