詳解Vue之父子組件傳值

更新時間：2019年04月01日 14:40:49 作者：咸魚最牛逼

這篇文章主要介紹了Vue之父子組件傳值，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

一、簡要介紹

父子組件之間的傳值主要有三種：傳遞數(shù)值、傳遞方法、傳遞對象，主要是靠子組件的 props 屬性來接收傳值，下面分別介紹：

（一）傳遞數(shù)值

1.子組件：Header.vue

<template>
 <div>
  <!-- data對象里并沒有 msg 屬性，這里調用的是父類傳遞過來的 msg 屬性 -->
  <h2>{{msg}}</h2>
 </div>
</template>
<script>
export default {
 data() {
  return {
  }
 },
 methods: {
 },
 // 接收父類的傳值
 props: ['msg']
}
</script>

可以看到，在子組件中的data對象里并沒有 msg 屬性，這里調用的是父類傳遞過來的 msg 屬性，接收就是靠 props: ['msg']。

2.父組件Home.vue

<template>
 <div>
  <!-- 2.使用子組件，并向子組件傳值 -->
  <v-head :msg="msg"></v-head>

  <br>
  <br>
 </div>
</template>

<script>
// 1.引入子組件
import Head from './Head.vue';

export default {
 data() {
  return {
   msg: '我是一個組件'
  }
 },
 methods: {
 },
 components: {
  "v-head": Head
 },
 // 頁面刷新時請求數(shù)據(jù)
 mounted() {
 }
}
</script>

傳值的核心思想就是，在使用子組件的地方，加上要傳遞的值:<v-head :msg="msg"></v-head>

（二）傳遞方法

傳遞方法的寫法和傳遞數(shù)值一樣，下面只寫出關鍵步驟：

父組件

<template>
 <div>
  <!-- 2.使用子組件，并向子組件傳值 -->
  <v-head :run="run"></v-head>

  <br>
  <br>
 </div>
</template>

<script>
// 1.引入子組件
import Head from './Head.vue';

export default {
 data() {
  return {
   msg: '我是一個組件'
  }
 },
 methods: {
  run() {
   alert(this.msg);
  }
 },
 components: {
  "v-head": Head
 },
 // 頁面刷新時請求數(shù)據(jù)
 mounted() {
 }
}
</script>

子組件

<template>
 <div>
  <button @click="run">接收父組件的方法</button>
 </div>
</template>
<script>
export default {
 data() {
  return {
  }
 },
 methods: {
 },
 // 接收父類的傳值
 props: ['run']
}
</script>

（三）傳遞對象

傳遞對象的寫法和傳遞數(shù)值一樣，下面只寫出關鍵步驟：

父組件

<template>
 <div>
  <!-- 2.使用子組件，并向子組件傳值，這里的 this 就是 Home 組件 -->
  <v-head :home="this"></v-head>

  <br>
  <br>
 </div>
</template>

<script>
// 1.引入子組件
import Head from './Head.vue';

export default {
 data() {
  return {
   msg: '我是一個組件'
  }
 },
 methods: {
  run() {
   alert(this.msg);
  }
 },
 components: {
  "v-head": Head
 },
 // 頁面刷新時請求數(shù)據(jù)
 mounted() {
 }
}
</script>

子組件

<template>
 <div>
  <!-- data對象里并沒有 msg 屬性，這里調用的是父類傳遞過來的 msg 屬性 -->
  <h2>{{msg}}</h2>
  <br>
  <br>
  <button @click="run">接收父組件的方法</button>
 </div>
</template>
<script>
export default {
 data() {
  return {
   // 調用傳過來的home組件的msg屬性
   msg: this.home.msg
  }
 },
 methods: {
  run() {
   // 調用傳過來的home組件的run()方法
   this.home.run();
  }
 },
 // 接收父類的傳值
 props: ['home']
}
</script>

（四）傳遞數(shù)值類型校驗