今回はvueの親子コンポーネント通信の使い方と、vueの親子コンポーネント通信を使う際の注意点について、実際の事例を交えて見ていきましょう。
りー
コンポーネント間通信に関する包括的な演習:
(props down、events up)
2 つのコンポーネントがあります: チャット ルーム、ユーザー コンポーネント
ユーザー コンポーネントはラベル入力ボタンで構成されます
チャット ルームは 2 つのユーザー コンポーネントで構成されますそして 1 つのリスト構成
① チャットルームで user-component を呼び出して、ラベルの名前を指定します
② user-component で、
ボタン をクリックすると、現在のユーザーが入力した情報が chat-room コンポーネントに送信され、chat- 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>
mint-uiloadmore プルアップ読み込みとプルダウン更新の間の競合を処理する方法
以上がvueの親子コンポーネント通信の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。