vueの親子コンポーネント通信の使い方-jsチュートリアル-php.cn

vueの親子コンポーネント通信の使い方

php中世界最好的语言

リリース： 2018-04-14 17:03:36

オリジナル

1304 人が閲覧しました

今回は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>

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

mint-uiloadmore プルアップ読み込みとプルダウン更新の間の競合を処理する方法

ES6 でのテンプレート文字列の使用方法の詳細な説明

以上がvueの親子コンポーネント通信の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。