ホームページ > 記事 > ウェブフロントエンド > vueの親子コンポーネント通信の使い方
vueの親子コンポーネント通信の使い方
- php中世界最好的语言オリジナル
- 2018-04-14 17:03:361210ブラウズ
今回は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 プルアップ読み込みとプルダウン更新の間の競合を処理する方法
以上がvueの親子コンポーネント通信の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：独自の制限を解除する方法次の記事：独自の制限を解除する方法