How to use vue parent-child component communication

This time I will bring you how to use vue parent-child component communication. What are the precautions when using vue parent-child component communication. The following is a practical case, let's take a look.

nbsp;html>

 
 <meta>
 <title>组件父子间通信之综合练习</title>
 <script></script>
 
 
 <p>
  </p><p>{{msg}}</p>
  <chat-room></chat-room>
 
 <script>
// 创建父组件
  Vue.component("chat-room",{
  //data属性中的chatList保存用户聊天信息
   data:function(){
    return{
     chatList:[]
    }
   },
   template:`
    <p>
     //假的聊天室
     <h1>假的聊天室
     <user-component userName="Rose">
     <user-component userName="Jack">
     //显示用户的聊天信息
     <ul>
      <li v-for="tmp in chatList">{{tmp}}
     
    
   `
  })
 //创建子组件 
  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}}
     <input type="text" v-model="userInput"/>
     <button @click="sendChat">发送
    
   `
  })
  new Vue({
   el:"#container",
   data:{
    msg:"Hello VueJs"
   }
  })
 </script>
 

Comprehensive exercises for communication between components:
(props down, events up)
There are 2 components: chat-room, user-component
user-component is composed of label input button
chat-room is Composed of two user-component and a list

① Call user-component in chat-room to specify the name of the label
② When user-component,
clicks the button , the information entered by the current user is sent to the chat-room component, chat- Room receives data and displays it in the list

Code:

nbsp;html>


 <meta>
 <script></script>
 <title></title>


<p>
 <chat-room></chat-room>
</p>
<script>
 Vue.component(&#39;chat-room&#39;,{
  methods:{
   recvMsg:function(msg){
    console.log("在父组件中接收子组件传来的数据"+msg);
    this.chatList.push(msg);
   }
  },
 data: function () {
  return {
  chatList:[]
  }
 },
 template:`
  <p>
    <h1>假的聊天室
  <ul>
   <li v-for="tmp in chatList">
   {{tmp}}
   
  
  <user-component userName="Lucy" @sendToFather="recvMsg">
  <user-component userName="Merry" @sendToFather="recvMsg">
  
  `
 })
 Vue.component(&#39;user-component&#39;,{
 props:[&#39;userName&#39;],
 data: function () {
  return {
  userInput:&#39;&#39;
  }
 },
 methods:{
  sendToFather: function () {
  //触发toFatherEvent的事件，把input中
  //用户输入的数据发送
  this.$emit("sendToFather",this.userName+":"+this.userInput);
  }
 },
 template:`
  <p>
  <label>{{userName}}
  <input type="text" v-model="userInput"/>
  <button @click="sendToFather">发送
  
  `
 })
 new Vue({
 el: &#39;#container&#39;,
  data: {
  msg: &#39;Hello Vue&#39;
  }
 })
</script>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

mint-ui loadmore Pull-up loading and pull-down refresh conflict handling method

Templates in ES6 Detailed explanation of string usage

The above is the detailed content of How to use vue parent-child component communication. For more information, please follow other related articles on the PHP Chinese website!