为了账号安全,请及时绑定邮箱和手机立即绑定

有没有办法在new vue里引用vue的组件中的值?

有没有办法在new vue里引用vue的组件中的值?

富国沪深 2018-11-15 15:15:08
原谅我没有办法准确的询问问题,我暂时只是个vue初学者,而且我其实也看不太懂教程(正在努力尝试理解当中。。)我在研究改进nodejs的一个聊天室demo,有公聊私聊功能(多房间的),关于私聊我想在公聊房间的基础上加个房间内人数的判断即了事。现在情况是这样的,我想在vRoom的methods当中引用一个值,这个值在component当中是this.message.roomChat(我用这个值来判断公聊私聊),在vRoom的methods的upUsers方法当中的message.roomChat(这种写法是错的)就是component的那个值。求各位大神解答?
查看完整描述

1 回答

?
蛊毒传说

TA贡献1895条经验 获得超3个赞

我用了一个比较tricky的方式解决,但并不是真正的解决方案。

var joinRoom = $('#joinRoom'),joinRoomLabel=$('#joinRoomLabel'),curRoomId,

onlineAlert=$('#onlineAlert'),offlineAlert=$('#offlineAlert'),chatLeft=$('#chatLeft');

Vue.component('room',{

  props:['message'],

  methods:{

    selectRoom:function(){


            chatLeft.empty();

            curRoomId = this.message._id;

            joinRoomLabel.text(this.message.roomName);


            joinRoom.modal('toggle');

            socket.emit('online', {user: from, curRoomId: curRoomId});

            if(this.message.roomChat=='secret'){

                vRoom.getUsers();

            }else{

                vRoom.getpUsers();

            }

    }

  },

  template: '<div class="room"><div class="room-header"><div class="room-header-back"></div><div class="room-header-content"><div>{{message.roomName}}</div><div><span class="glyphicon glyphicon-plus-sign" v-on:click="selectRoom"></span></div></div></div><div class="room-body"><img src="/public/imgs/0.png"><div class="room-text">{{message.roomContent}}</div></div><div class="room-footer"><div class="room-footer-back"></div><div class="room-footer-content"><div class="room-peos">参与:<span>{{message.roomJoinPeos}}人</span></div><div><span class="glyphicon glyphicon-heart"></span></div> </div></div></div>'

});

var vRoom = new Vue({

  el:'#joinRoom',

  data:{

    users:[],

    messageBody:'',

    roomChat:'',

    roomJoinPeos:''

  },

  methods:{

    upUsers:function(data){

      this.users = [];

      var us = [];

      for(var u in data){

        us.push(u);

      }

      if(us.length==3){

            alert("房间已满,但在同一房间的人会知道您曾经尝试进入该房间");

            joinRoom.modal('toggle');

            this.closeRoom();

            return;

        }

      this.users = us;

    },

    getUsers:function(){

      $.get('/room/users/'+curRoomId,function(data){

        this.upUsers(data);

      }.bind(this));

    },

      uppUsers:function(data){

          this.users = [];

          var us = [];

          for(var u in data){

              us.push(u);

          }

          this.users = us;

      },

      getpUsers:function(){

          $.get('/room/users/'+curRoomId,function(data){

              this.uppUsers(data);

          }.bind(this));

      },

    sendMessage:function(){

        if(this.messageBody){

          chatLeft.append(' <div class="chatLeftOwenr"><div class="chatLeftOwenrPeo">'+from+'</div><div class="chatLeftOwenrContent">'+this.messageBody+'</div></div>');

          socket.emit('say',{toObj:'all',messageBody:this.messageBody,curRoomId:curRoomId,user:from});

          this.messageBody='';

        }

    },

    closeRoom:function(){

        socket.emit('offline',{curRoomId:curRoomId,user:from});

        curRoomId = '';

    }

  }

})


查看完整回答
反对 回复 2018-12-05
  • 1 回答
  • 0 关注
  • 587 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信