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

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

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

本文實例為大家分享了vue組件父子間通信的具體代碼，供大家參考，具體內(nèi)容如下

三、組件間通信（$parent $refs）

父組件要想獲取子組件的數(shù)據(jù)：

①在調(diào)用子組件的時候，指定ref屬性

<child-component ref="mySon"></child-component>

②根據(jù)指定的引用的名字找到子組件的實例對象

this.$refs.mySon

子組件要想獲取父組件的數(shù)據(jù)：

①直接讀取
this.$parent
通過this.$refs拿到子組件的數(shù)據(jù)

代碼：

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>組件間通信-01</title>
  <script src="js/vue.js"></script>
 </head>
 <body>
 <div id="container">
    <p>{{msg}}</p>
    <dahua></dahua>
  </div>
  <script>
  //vue提供的ref
    Vue.component("dahua",{
      data:function(){
        return{
          mySonName:""
        }
      },
      methods:{
      //通過$refs拿到指定的所引用的對應(yīng)的組件的實例對象
        getSonName:function(){
          this.mySonName = this.$refs.mySon.name;
        }
      },
      template:`
        <div>
          <h1>這是父組件</h1>
          <button @click = "getSonName">獲取子組件數(shù)據(jù)</button>
          <span>{{mySonName}}</span>
          <hr>
          <xiaohua ref="mySon"></xiaohua>
        </div>
      `
    })
//  創(chuàng)建子組件
    Vue.component("xiaohua",{
      data:function(){
        return{
          name:"小花"
        }
      },
      template:`
          <h1>這是子組件</h1>
      `
    })
    new Vue({
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 </body>
</html>

子組件通過$parent獲取父組件的數(shù)據(jù)

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>組件間通信-02</title>
  <script src="js/vue.js"></script>
 </head>
 <body>
 <div id="container">
    <p>{{msg}}</p>
    <dahua></dahua>
  </div>
  <script>
    //創(chuàng)建子組件
    Vue.component("dahua",{
      data:function(){
        return{
          myName:"大花"
        }
      },
      template:`
        <div>
          <h1>這是父組件</h1>
          <hr>
          <xiaohua></xiaohua>
        </div>
      `
    })
    //創(chuàng)建子組件
    Vue.component("xiaohua",{
      data:function(){
        return{
          msg:""
        }
      },
      template:`
        <div>
            <h1>這是子組件</h1>
            <p>{{msg}}</p>
        </div>
      `,
      created:function(){
        //在子組件創(chuàng)建完成時獲取父組件的數(shù)據(jù)
        //保存在msg中在p標(biāo)簽中顯示
          this.msg = this.$parent.myName;
      }
    })
    new Vue({
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 </body>
</html>

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

您可能感興趣的文章: