javascript - Vue.js + socket.io 如何更新 props

Question

所以这是我的 Vue 用户列表组件。 Socket.io 返回当前事件用户的列表，例如 [{name:Fluxed,rank:Admin}]，我希望它自动更新元素。如何更新 prop 元素然后使其显示更改？
这是我的代码

<template>
  <div id="app">
    <div>
    <div style="float:right;width:30%;border-left:1px solid black;padding:1%;">
      <b>Users</b>
      <b-list-group style="max-width: 300px;" >
        <b-list-group-item class="align-items-center" v-for="value in userList2" v-bind:key="value.name" >
          <b-avatar class="mr-3"></b-avatar>
          <span class="mr-auto">{{ value.name }}</span>
          <b-badge>{{ value.rank }}</b-badge>
        </b-list-group-item>
      </b-list-group>
      <ul class="list-group">
      </ul>
    </div>
  </div>
  </div>
</template>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script>
import io from 'socket.io-client';
import $ from 'jquery'
var socket = io('http://localhost:4000');
socket.on('update', function (users){
      this.userList = users;
      console.log(this.userList)
}) 
import VueJwtDecode from "vue-jwt-decode";
export default {
  
  name: 'app',
  props: {
    userList2: {
      type: Array,
      default: () => []
    }
  },
  data() {
    
    return {
      user: {},
      componentKey: 0,
      userList: this.userList2,
      
    };
  },
  
  created () {
    // get socket somehow
    socket.on('update', function (users){
      console.log(this.userList)
      this.userList = users;
      console.log(this.userList)
    }) 
  },
  methods: {
    async getUserDetails() {
      let token = localStorage.getItem("jwt");
      let decoded = VueJwtDecode.decode(token);
      let response = await this.$http.post("/update", decoded);
      let urank = response.data.rank;
      this.user = decoded;
      this.user.rank = urank;
    },
    logUserOut() {
      localStorage.removeItem("jwt");
      this.$router.push("/");
    },
    
  },
}
</script>

一旦 socket.io 发生更改，如何使 Vue 引导组项目自动更新？

Answer 1

概览:
您可以 $emit event将更新后的列表返回给父级，然后更新 data父组件中的属性。那是因为你不应该直接修改props .

示例:
在您的子组件中:

import io from 'socket.io-client';

data() {
 return {
  socket: io()
 }
},
props: {
 userList2: {
  type: Array,
  default: () => []
 }
},
created() {
  this.socket.on('update', (users) => {
   this.$emit('updateListEv', users);
  })
}

然后在您的父组件中:

<childNameComponent @updateListEv="updateList"></childNameComponent>

那么你需要在你的父组件中使用一个方法来实际更新 data带有从子组件传回的数据的属性。

methods: {
  updateList(updatedList) {
   this.userList2 = updatedList
  }
}

注:
您应该可以使用您的 prop如果您这样做，则直接这样做，因此无需设置额外的 data您的子组件中的属性 - userList: this.userList2 .
你会遍历 userList2在这种情况下 - 与您现在所做的相同 - v-for="value in userList2"您还可以看到，在这种情况下，我们将套接字初始化为 data属性，以便我们可以在我们的 Vue 实例中使用它。

编辑:

import io from 'socket.io-client';
data() {
  return {
    socket: io(),
    usersList: this.userList2
  }
},
props: {
 userList2: {
  type: Array,
  default: () => []
 }
},
created() {
  this.socket.on('update', (users) => {
   this.userList = users
  })
}

在您的 HTML模板循环遍历用户列表:

v-for="value in usersList"

将 socket.io 与 Vue.js 和 Node.js 一起使用完整示例:
在您的后端 (Node.js) 中:

//setting up sockets
const app = express()
const server = http.createServer(app)
const io = require('socket.io')(server)
io.on('connection', (socket) => {
  socket.on('sendUpdateList', function(data) {
    io.emit('listUpdate', data)
  });
})

从组件发送更新:

import io from 'socket.io-client';

data() {
 return {
  socket: io(),
  usersList: []
 }
},
methods: {
 this.socket.emit('sendUpdateList', {usersList: this.usersList})
}

监听组件中的socket:

import io from 'socket.io-client';

data() {
 return {
  socket: io(),
  usersList: []
 }
},
created() {
  this.socket.on('listUpdate', (data) => {
   this.usersList = data.usersList
  })
}