vue組件間通信子與父詳解（二）

更新時間：2017年11月07日 11:49:14 作者：匿名的girl

這篇文章主要為大家詳細(xì)介紹了vue組件間通信子與父的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

接著vue組件父與子通信詳解繼續(xù)學(xué)習(xí)。

二、組件間通信（子組件傳值給父組件）

通過事件的方式來完成數(shù)據(jù)的傳輸。

①在父組件中定義一個方法，用來接收子組件所通過事件傳來的值

methods:{
　　recvMsg:function(msg){
　　//參數(shù)msg就是子組件通過事件出來的數(shù)據(jù)
　　}
}

②綁定事件處理函數(shù)

事件一般情況都是自定義事件

<child-component @myEvent="recvMsg"></child-component>

③在子組件觸發(fā)事件

　　　　　　事件名，值
this.$emit('myEvent',myPhone)
//觸發(fā)一個叫做myEvent的事件，同時把第二個參數(shù)數(shù)據(jù)傳遞給事件對應(yīng)的處理函數(shù)

總結(jié)：

在Vue 中，父子組件的關(guān)系可以總結(jié)為 props down, events up。父組件通過 props 向下傳遞數(shù)據(jù)給子組件，子組件通過 events 給父組件發(fā)送消息。

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>組件間通信子傳父</title>
  <script src="js/vue.js"></script>
 </head>
 <body>
 <div id="container">
    <p>{{msg}}</p>
    <parent-component></parent-component>
  </div>
  <script>
    //通過事件的方式傳遞
    //  綁定 -- 觸發(fā)
    Vue.component("parent-component",{
      data:function(){
        return {
          sonMsg:""
        }
      },
      methods:{
        //msg參數(shù)要拿子傳遞的值          
        recvMsg:function(msg){
          console.log("父組件接收到子組件的數(shù)據(jù)"+msg);
          this.sonMsg = msg;

        }
      },
      template:`
        <div>
          <h1>這是父組件</h1>
          <p>子組件傳來的數(shù)據(jù)為：{{sonMsg}}</p>
          <hr/>
          <child-component @customEvent="recvMsg"></child-component>
        </div>
      `
    })
    Vue.component("child-component",{
      methods:{
        sendMsg:function(){
          //來觸發(fā)綁定給子組件的自定義方法
          //this.$emit("customEvent");第一個參數(shù)觸發(fā)
          //this.$emit("customEvent");第二個參數(shù)傳值
          this.$emit("customEvent","哈哈哈哈");
        },
      },
      template:`
        <div>
          <h1>這是子組件</h1>
          <button @click="sendMsg">senToFather</button>
        </div>
      `
    })
    new Vue({
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 </body>
</html>

在子組件中放上一個input，點擊按鈕把用戶輸入的內(nèi)容發(fā)給父組件

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>子與父之間的通信</title>
  <script src="js/vue.js"></script>
 </head>
 <body>
 <div id="container">
    <p>{{msg}}</p>
    <parent-component></parent-component>
  </div>
  <script>
  //創(chuàng)建父組件
    Vue.component("parent-component",{
    //data屬性
      data:function(){
        return{
          sonMsg:""
        }
      },
      methods:{
        recvMsg:function(msg){
          this.sonMsg = msg
        }
      },
      template:`
        <div>
          <h1>父組件</h1>
          <h4>子組件傳遞的數(shù)據(jù)：{{sonMsg}}</h4>
          <child-component @customEvent="recvMsg"></child-component>
        </div>
      `
    })
    //創(chuàng)建子組件
    Vue.component("child-component",{
      data:function(){
        return {
          myInput:""
        }
      },
      methods:{
        sendMsg:function(){
          this.$emit("customEvent",this.myInput);
        }
      },
      template:`
        <div>
          <h1>子組件</h1>
          <input type="text" v-model="myInput"/>
          <button @click="sendMsg">發(fā)送</button>
        </div>
      `
    })
    new Vue({
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 </body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: