Vue 컴포넌트에서 아버지와 아들의 소통을 위한 채팅방의 상세 예시
Dec 26, 2017 pm 01:28 PM
구성 요소
통신
이 글은 주로 Vue 컴포넌트에서 부모-자식 커뮤니케이션을 위한 종합 연습 채팅방 생성에 대해 자세히 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>组件父子间通信之综合练习</title>
<script src="js/vue.js"></script>
</head>
<body>
<p id="container">
<p>{{msg}}</p>
<chat-room></chat-room>
</p>
<script>
// 创建父组件
Vue.component("chat-room",{
//data属性中的chatList保存用户聊天信息
data:function(){
return{
chatList:[]
}
},
template:`
<p>
//假的聊天室
<h1>假的聊天室</h1>
<user-component userName="Rose"></user-component>
<user-component userName="Jack"></user-component>
//显示用户的聊天信息
<ul>
<li v-for="tmp in chatList">{{tmp}}</li>
</ul>
</p>
`
})
//创建子组件
Vue.component("user-component",{
props:["userName"],
//通过v-model把用户输入的数据保存到userInput数组
data:function(){
return {
userInput:[]
}
},
methods:{
//把用户输入的数据以及用户名label信息push给chatList数组
sendChat:function(){
this.$parent.chatList.push(this.userName+":"+this.userInput);
//情况input框
this.userInput =" ";
}
},
template:`
<p>
<label>{{userName}}</label>
<input type="text" v-model="userInput"/>
<button @click="sendChat">发送</button>
</p>
`
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>로그인 후 복사
컴포넌트 간 통신에 대한 종합 연습:
(props down, events up)
2개의 컴포넌트가 있습니다: 채팅방, 사용자 컴포넌트
user-컴포넌트는 라벨 입력 버튼으로 구성됩니다.
chat-room은 두 개의 user-컴포넌트와 목록으로 구성됩니다.
①채팅방에서 user-컴포넌트를 호출하여 라벨 이름 지정
②user-컴포넌트에서
버튼을 클릭하면 현재 사용자가 입력한 정보 chat-room 구성 요소로 전송됩니다. chat- 방에서 받은 데이터가 목록에 표시됩니다.
코드:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title></title>
</head>
<body>
<p id="container">
<chat-room></chat-room>
</p>
<script>
Vue.component('chat-room',{
methods:{
recvMsg:function(msg){
console.log("在父组件中接收子组件传来的数据"+msg);
this.chatList.push(msg);
}
},
data: function () {
return {
chatList:[]
}
},
template:`
<p>
<h1>假的聊天室</h1>
<ul>
<li v-for="tmp in chatList">
{{tmp}}
</li>
</ul>
<user-component userName="Lucy" @sendToFather="recvMsg"></user-component>
<user-component userName="Merry" @sendToFather="recvMsg"></user-component>
</p>
`
})
Vue.component('user-component',{
props:['userName'],
data: function () {
return {
userInput:''
}
},
methods:{
sendToFather: function () {
//触发toFatherEvent的事件，把input中
//用户输入的数据发送
this.$emit("sendToFather",this.userName+":"+this.userInput);
}
},
template:`
<p>
<label>{{userName}}</label>
<input type="text" v-model="userInput"/>
<button @click="sendToFather">发送</button>
</p>
`
})
new Vue({
el: '#container',
data: {
msg: 'Hello Vue'
}
})
</script>
</body>
</html>로그인 후 복사
관련 권장 사항:
Node.js를 사용하여 다자간 실시간 온라인 채팅방 작성
php websocket을 사용하여 간단한 채팅방 만들기
위 내용은 Vue 컴포넌트에서 아버지와 아들의 소통을 위한 채팅방의 상세 예시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 기사
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
Repo : 팀원을 부활시키는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD
인기 기사
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
Repo : 팀원을 부활시키는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD
뜨거운 기사 태그
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
Gmail 이메일의 로그인 입구는 어디에 있나요?
7309
9
7309
9
자바 튜토리얼
1623
14
1623
14
Cakephp 튜토리얼
1344
46
1344
46
라라벨 튜토리얼
1259
25
1259
25
PHP 튜토리얼
1207
29
1207
29
Windows 10 이전 버전 구성 요소 DirectPlay를 설치하는 방법
Dec 28, 2023 pm 03:43 PM
Windows 10 이전 버전 구성 요소 DirectPlay를 설치하는 방법
Nokia는 장치 관리 및 서비스 관리 플랫폼 사업을 1억 8,500만 유로에 매각할 계획입니다.
Dec 21, 2023 am 08:07 AM
Nokia는 장치 관리 및 서비스 관리 플랫폼 사업을 1억 8,500만 유로에 매각할 계획입니다.
