javascript - 有没有办法在new vue里引用vue的组件中的值?
大家讲道理
大家讲道理 2017-04-11 13:14:06
[JavaScript讨论组]

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

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});
            vRoom.getUsers();


    }
  },
  template: '

{{message.roomName}}

{{message.roomContent}}

参与:{{message.roomJoinPeos}}人

' }); 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(/*message.roomChat*/=='secret'&&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)); }, sendMessage:function(){ if(this.messageBody){ chatLeft.append('

'+from+'

'+this.messageBody+'

'); socket.emit('say',{toObj:'all',messageBody:this.messageBody,curRoomId:curRoomId,user:from}); this.messageBody=''; } }, closeRoom:function(){ socket.emit('offline',{curRoomId:curRoomId,user:from}); curRoomId = ''; } } })
大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回复(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: '<p class="room"><p class="room-header"><p class="room-header-back"></p><p class="room-header-content"><p>{{message.roomName}}</p><p><span class="glyphicon glyphicon-plus-sign" v-on:click="selectRoom"></span></p></p></p><p class="room-body"><img src="/public/imgs/0.png"><p class="room-text">{{message.roomContent}}</p></p><p class="room-footer"><p class="room-footer-back"></p><p class="room-footer-content"><p class="room-peos">参与:<span>{{message.roomJoinPeos}}人</span></p><p><span class="glyphicon glyphicon-heart"></span></p> </p></p></p>'
});
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(' <p class="chatLeftOwenr"><p class="chatLeftOwenrPeo">'+from+'</p><p class="chatLeftOwenrContent">'+this.messageBody+'</p></p>');
          socket.emit('say',{toObj:'all',messageBody:this.messageBody,curRoomId:curRoomId,user:from});
          this.messageBody='';
        }
    },
    closeRoom:function(){
        socket.emit('offline',{curRoomId:curRoomId,user:from});
        curRoomId = '';
    }
  }
})
天蓬老师

room 这个组件没有被引用过吧..

PHPz

触发事件是 this.$emit啊

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号