집 > 기사 > 웹 프론트엔드 > Vue 부모-자식 구성 요소 통신을 사용하는 방법

Vue 부모-자식 구성 요소 통신을 사용하는 방법

php中世界最好的语言원래의: 2018-04-14 17:03:361210검색

이번에는 Vue 부모-자식 컴포넌트 통신 사용 방법을 알려드리겠습니다. Vue 부모-자식 컴포넌트 통신 사용 시 주의사항은 무엇인가요?

rreee

컴포넌트 간 통신에 대한 종합 연습:
(props down, events up)
2개의 컴포넌트가 있습니다: 채팅방, 사용자 컴포넌트
user-컴포넌트는 라벨 입력 버튼으로 구성됩니다.
chatroom은 두 개의 user-컴포넌트로 구성됩니다. 그리고 하나의 목록 구성

① 라벨의 이름을 지정하기 위해 채팅방에서 user-comfort
를 호출합니다. ② user-Component에서
버튼 을 클릭하면 현재 사용자가 입력한 정보가 채팅방 컴포넌트로 전송되고, 채팅방 컴포넌트에서 room은 데이터를 수신하여 목록에 표시합니다

코드:

<!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>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!