vue學習筆記：父子元件之間的傳值$refs和$parent，以及父元件給子元件傳值props

父元件擷取子元件的值和方法

父元件：

html代碼

<!-- 父元件擷取子元件的值 -->
 <v-header ref="headerTY"></v-header>
 <button @click="getData">父元件擷取子元件的值和方法</button>
           

js代碼：

<script>
import Header from './header';
export default {
  data(){
    return{
        msg:'這是一個首頁元件',
        name:'首頁',
        dataone:'首頁第一個資料',
        title:'111'
    }
  },
  components:{
      'v-header':Header
  },
  methods:{
      getData(){
        // console.log(this.$refs.headerTY.msg)
        this.$refs.headerTY.run();
      },
      Yun(){
        alert('父元件')
      }
  }
 
 
}
</script>
           

子元件

html代碼：

<template>
  <div id="app1">
    {{msg}}
    <button @click="getParent()">擷取付父元件的值和方法</button>
   <hr>
  </div>
</template>
           

js代碼：

<script>
export default {
  data(){
    return{
        msg:'這是一個頭部元件',
        didi:''
    }
  },
  methods:{
    run(){
      alert(111)
    },
    getParent(){
      alert(this.$parent.name);
      
    }
  }
 
}
</script>
           

父元件通過引入子元件，并在子元件中加入屬性ref="header",然後根據this.$refs.header來擷取子元件的屬性和方法。

子元件擷取父元件的值和方法

在子元件中直接調用this.$parent來擷取父元件中的值和方法即可。

父元件通過props給子元件傳值

除此之外，父元件還可以通過props給子元件傳值

父元件html代碼：

<template>
  <div id="app">
   <h1>{{msg}}</h1>
   <!-- 父元件給子元件傳值、傳方法和父元件執行個體本身 -->
   <v-header :title="name" :dataOne="dataone" :run="Ale" :home='this' ref="headerTY"></v-header>
   <hr>
   <br>
  </div>
</template>
           

父元件js代碼：

<script>
import Header from './header';
export default {
  data(){
    return{
        msg:'這是一個首頁元件',
        name:'首頁',
        dataone:'首頁第一個資料',
        title:'111'
    }
  },
   components:{
      'v-header':Header
  },
  methods:{
      Ale(data){
        alert("這是父元件方法"+data)
      },
      Set(){
          alert(111)
      }
  }
 
 
}
</script>
           

子元件html代碼：

<template>
  <div id="app1">
   <h2>{{msg}}--{{title}}--{{dataOne}}</h2>
   <button @click="run(111)">擷取父元件方法</button><br>
   <button @click="GetData()">擷取父元件執行個體</button>
   <br>
   <hr>
  </div>
</template>
           

子元件js代碼：

<script>
export default {
  data(){
    return{
        msg:'這是一個頭部元件',
        didi:''
    }
  },
  methods:{
      GetData(){
          this.home.Set();
      }
  }
 
  ,props:['title','dataOne','run','home']
}
</script>
           

這種方法是父元件通過子元件的标簽聲明變量屬性，把父元件的值或者方法傳遞到子元件，除此之外也可以把父元件執行個體傳遞到子元件，如::home='this'就是。

而子元件可以根據props參數，通過傳遞過來的屬性來擷取父元件的屬性值和方法。